0

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

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

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

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

来自本地主机的按钮

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

浪涌按钮

如您所见，按钮将在浪涌时变为蓝色且较大。

这是此组件的代码片段：

<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 应用程序以激增：

  1. npm run build

  2. cd build

  3. copy index.html 200.html

  4. surge

这个网络应用程序的网址是：“ http://icy-crow.surge.sh/ ”

您可以使用用户名“Bret”和密码“Kulas Light”登录

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

4

1 回答 1

0

我的班级 1 中有一个 .btn 选择器，它永远不会被调用。激增以某种方式将“btn btn-primary btn-lg”映射到该选择器中。多么奇怪。

所以问题解决了。

于 2019-10-24T04:15:24.003 回答