Я использую кнопку React Bootstrap для стилизации своего веб-приложения React. Когда я запускаю его на своем локальном хосте, кнопки выглядят нормально, но как только я развертываю его для всплеска, кнопка React Bootstrap не будет отображаться правильно.
Моя установка React Bootstrap должна быть исправлена путем запуска командной строки: npm install react-bootstrap bootstrap
,
И импортируйте его в мой App.js следующим образом: import 'bootstrap/dist/css/bootstrap.min.css';
Веб-приложение на моем локальном хосте выглядит так:
Веб-приложение при скачке выглядит так:
Как видите, кнопка станет синей и большой при скачке.
Вот фрагмент кода для этого компонента:
<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>
Я развертываю веб-приложение для всплеска, сделав следующее:
npm run build
cd build
copy index.html 200.html
surge
URL-адрес этого веб-приложения: "http://icy-crow.surge.sh/ "
Вы можете войти в систему, используя имя пользователя: «Bret» и пароль: «Kulas Light».
Почему при всплеске стиль кнопок отличается от стиля кнопок на локальном хосте? Любая помощь будет оценена по достоинству.
1 ответ
У меня есть селектор .btn в одном из моих классов, который никогда не вызывается. Всплеск каким-то образом отображает "btn btn-primary btn-lg" на этот селектор. Как странно.
Итак, проблема исправлена.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.