Я использую кнопку React Bootstrap для стилизации своего веб-приложения React. Когда я запускаю его на своем локальном хосте, кнопки выглядят нормально, но как только я развертываю его для всплеска, кнопка React Bootstrap не будет отображаться правильно.

Моя установка React Bootstrap должна быть исправлена ​​путем запуска командной строки: npm install react-bootstrap bootstrap,

И импортируйте его в мой App.js следующим образом: import 'bootstrap/dist/css/bootstrap.min.css';

Веб-приложение на моем локальном хосте выглядит так:

кнопка с localhost

Веб-приложение при скачке выглядит так:

кнопка от всплеска

Как видите, кнопка станет синей и большой при скачке.

Вот фрагмент кода для этого компонента:

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

Я развертываю веб-приложение для всплеска, сделав следующее:

  1. npm run build

  2. cd build

  3. copy index.html 200.html

  4. surge

URL-адрес этого веб-приложения: "http://icy-crow.surge.sh/ "

Вы можете войти в систему, используя имя пользователя: «Bret» и пароль: «Kulas Light».

Почему при всплеске стиль кнопок отличается от стиля кнопок на локальном хосте? Любая помощь будет оценена по достоинству.

0
EzyHoo 24 Окт 2019 в 01:10

1 ответ

Лучший ответ

У меня есть селектор .btn в одном из моих классов, который никогда не вызывается. Всплеск каким-то образом отображает "btn btn-primary btn-lg" на этот селектор. Как странно.

Итак, проблема исправлена.

0
EzyHoo 24 Окт 2019 в 04:15