Кнопка React Bootstrap не отображается правильно в Surge - PullRequest
Новая
       47

Кнопка React Bootstrap не отображается правильно в Surge

0 голосов
/ 24 октября 2019

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

Моя установка React Bootstrap должна быть исправлена ​​с помощью командной строки:1003 *,

и импортируйте его в мой 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»

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

1 Ответ

0 голосов
/ 24 октября 2019

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

Так что проблема исправлена.

...