Incorporating react-bootstrap into my application, I encountered the need to adjust the background color of the menu within the NavDropdown component. Using modular css for my react setup, attempts to modify the background-color property yielded no result.
View Image of React-Bootstrap NavDropdown
Index.js:
<NavDropdown
title={style.dropdownTitle}
id={style.dropdownMenu}
align="end"
>
<NavDropdown.Item
href="#action/3.1"
className={style.dropdownItem}
>
Profile
</NavDropdown.Item>
<NavDropdown.Item
href="#action/3.1"
className={style.dropdownItem}
>
Learnings
</NavDropdown.Item>
<NavDropdown.Item
href="#action/3.1"
className={style.dropdownItem}
>
Logout
</NavDropdown.Item>
</NavDropdown>
index.module.css:
#dropdownMenu {
background-color: #002037;
color: #e2dec0 !important;
margin: 0px 10px;
}
.dropdownItem {
font-size: 21px;
color: #e2dec0 !important;
}
Seeking a solution, I tried making adjustments via the browser's developer tools
Before: Chrome Browser Developer Tools (BEFORE)
After: Chrome Browser Developer Tools (AFTER)