#css #reactjs #react-bootstrap #bootstrap-5
Вопрос:
Я пытался использовать компонент аккордеона react-bootstraps, но понял, что import "bootstrap/dist/css/bootstrap.min.css"; для работы аккордеона требуется импорт. При добавлении этого импорта весь мой пользовательский css был переопределен загрузкой. Есть ли вообще возможность, чтобы мой css переопределял css начальной загрузки? Я использую <link href="%PUBLIC_URL%/css/style.css" rel="stylesheet"/> в своих index.html чтобы связать мои таблицы стилей.
Комментарии:
1. Я не думаю, что для начальной загрузки необходимо, чтобы CSS импортировался вручную. он также будет работать без импорта. Можете ли вы добавить демо-версию песочницы ?
Ответ №1:
Вы jsx code должны быть написаны так, где link tag ваша пользовательская таблица стилей должна быть помещена под загрузочным cdn, потому что в JavaScript код будет скомпилирован сверху вниз, поэтому ваша пользовательская таблица стилей будет скомпилирована после bootstrap cdn .
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
затем вы можете задать стили в соответствии с классами, такими как
.alert{
background-color:red !important;
}
Это переопределит ваш стиль начальной загрузки по умолчанию.
Дополнительный совет — Вы должны импортировать файл bootstrap CDN for CSS в свой index.html файл, и тогда не будет необходимости добавлять пользовательские таблицы стилей.