#css #reactjs #twitter-bootstrap #user-interface #react-bootstrap
Вопрос:
Я использую react-bootstrap в своем приложении, и мне нужно было изменить цвет фона меню NavDropdown компонента. Я использовал модульный css для своего приложения react. Я пробовал цвет фона, но никакого эффекта.
Реагировать-Загрузочное изображение NavDropdown
Index.js :
lt;NavDropdown title={style.dropdownTitle} id={style.dropdownMenu} align="end" gt; lt;NavDropdown.Item href="#action/3.1" className={style.dropdownItem} gt; Profile lt;/NavDropdown.Itemgt; lt;NavDropdown.Item href="#action/3.1" className={style.dropdownItem} gt; Learnings lt;/NavDropdown.Itemgt; lt;NavDropdown.Item href="#action/3.1" className={style.dropdownItem} gt; Logout lt;/NavDropdown.Itemgt; lt;/NavDropdowngt; index.module.css :
#dropdownMenu { background-color: #002037; color: #e2dec0 !important; margin: 0px 10px; } .dropdownItem { font-size: 21px; color: #e2dec0 !important; } Я попытался изменить его в инструментах разработчика браузера
До: Инструменты разработчика браузера Chrome (ДО)
После: Инструменты разработчика браузера Chrome (ПОСЛЕ)
Комментарии:
1. Вы проверили элемент в своем браузере, чтобы узнать, какие стили применяются? Совпадает ли ваш селектор? Это что — то отменяется? Нам довольно сложно помочь в этом, но вам довольно легко увидеть, что происходит.
2. Применяются ли остальные стили?
3. @Woohaik Да, остальные стили применяются, за исключением цвета фона.
4. Да, вам нужно осмотреть элемент и проверить, какой цвет фона на самом деле исходит от него. Я подозреваю, что есть какой-то другой элемент, который на самом деле обеспечивает фон
5. Я обновил вопрос выше. Я добавил изображения с помощью инструментов разработчика моего браузера.
Ответ №1:
Я добавил временное исправление на данный момент. Я выбрал следующий элемент div из класса DropDownMenu, который указывает на выпадающее меню, найденное в инструментах разработчика:
#dropdownMenu div { background-color: #002037 !important; } .dropdownItem:hover { color: #002037 !important; }