React Bootstrap button does not display correctly on Surge

Question

I am using the React Bootstrap button to style my React web app. When I run it on my localhost, the buttons look fine, but once I deploy it to surge, the React Bootstrap button will not display correctly.

My React Bootstrap installation should by correct by running the command line: npm install react-bootstrap bootstrap,

and import it on my App.js like this: import 'bootstrap/dist/css/bootstrap.min.css';

The web app on my localhost looks like this:

button from localhost

The web app on surge looks like this:

button from surge

As you can see, the button will become blue and big on the surge.

Here is a code piece for this component:

<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>

I deploy the web app to surge by doing this:

1. npm run build

2. cd build

3. copy index.html 200.html

4. surge

The url for this web app is: "http://icy-crow.surge.sh/"

You can log in by using username: "Bret" and password: "Kulas Light"

Why am I getting different buttons style on surge than on localhost? Any help would be appreciated.

Answer 1

I have a .btn selector in 1 of my class, which never get called. The surge somehow map the "btn btn-primary btn-lg" into that selector. How weird.

So the issue fixed.