React Bootstrap 按钮在 Surge 上无法正确显示

Question

我正在使用 React Bootstrap 按钮来设置我的 React 网络应用程序的样式。当我运行它在我的本地主机上时，按钮看起来很好，但是一旦我将它部署到 surge，React Bootstrap 按钮将无法正确显示。

我的 React Bootstrap 安装应该通过运行命令行更正：npm install react-bootstrap bootstrap,

并将其导入到我的 App.js 中，如下所示：import 'bootstrap/dist/css/bootstrap.min.css';

我本地主机上的网络应用程序如下所示：

button from localhost

Surge 上的 Web 应用程序如下所示：

button from surge

如您所见，按钮会在激增时变成蓝色并且变大。

这是该组件的代码片段：

<div className="profileArea">
    <div className="header">My Profile</div>
    <div className="content">
        <div className="image">
            <img src={profileImg} alt=""></img>
        </div>
        <p className="name">{this.props.logInUser.username}</p>
        <p ref={this.status}>{this.state.currentStatus}</p>

        <div className="footer">
            <input className="statusInput" type="text" placeholder="New Status" ref={this.status}></input>
            <button type="button" className="btn btn-primary btn-sm ml-2" onClick={this.changeStatus}>Change Status</button>
            <Link to="/profile">
                <button type="button" className="btn btn-primary btn-lg mr-3">Profile</button>
            </Link>
            <Link to="">
                <button type="button" className="btn btn-warning btn-lg ml-3">Log Out</button>
            </Link>
        </div>
    </div>
</div>

我通过这样做来部署 web 应用程序以激增：

npm run build
cd build
copy index.html 200.html
surge

此网络应用的 url 是：“http://icy-crow.surge.sh/”

您可以使用用户名："Bret" 和密码："Kulas Light"

登录

为什么我在 surge 上的按钮样式与在本地主机上的按钮样式不同？任何帮助将不胜感激。

Answer 1

我的 class 中的 1 个中有一个 .btn 选择器，它从未被调用过。激增以某种方式将 "btn btn-primary btn-lg" 映射到该选择器中。好奇怪。

问题已解决。

React Bootstrap 按钮在 Surge 上无法正确显示

React Bootstrap button does not display correctly on Surge

html

javascript

reactjs

react-bootstrap

surge.sh