Change color & background-color of NavDropdown in react-bootstrap

Question

With my NavDropdown in react-bootstrap, I'm not able to style its color or background-color...

<NavDropdown eventKey={3} className="text-center" style={{ fontSize: `130%` }} title="Items to Choose" >
  <LinkContainer to="/about">
    <MenuItem eventKey={3.1} className="text-center">About</MenuItem>    
  </LinkContainer>
  <MenuItem divider />
  <LinkContainer to="/products">
    <MenuItem eventKey={3.2} className="text-center">Products</MenuItem>    
  </LinkContainer>      
  <MenuItem divider />
  <LinkContainer to="/blog-index">
    <MenuItem eventKey={3.3} className="text-center">Blog</MenuItem>    
  </LinkContainer>
</NavDropdown>

I am able to change the font-size using style={{ fontSize: '130%' }}, but I'd also like to change the color and background-color using,..

style={{ fontSize: '130%', color: '#fff', backgroundColor: 'blue' }}

...but color and backgroundColor do not work within the brackets.

One thing that I'd tried to do was to wrap the <NavDropdown> element in a styling div, but that messed up the Navbar elements' alignment.

Answer 1

set the id of your NavDropdown and create a css style for this id.

In react:

<NavDropdown title={"Example"} id="nav-dropdown">

In css:

#nav-dropdown{
    color: white;
    font-weight: bold;
    background-color: red;
}

Answer 2

After checking with inspect elements tool in chrome. I got it working by adding below lines in my index.html `

 div.dropdown-menu.show {
    background-color: #000000; // for drop down menu color
  }
  a.dropdown-item {
    color: #ffffff;   // for font color of individual drop down item
  }

`

Answer 3

Also possible to provide the title text as JSX element.

<NavDropdown
    title={
        <span className="text-primary my-auto">Dropdown</span>
    }
    id="nav-dropdown"
>
    <NavDropdown.Item>Action</NavDropdown.Item>
    <NavDropdown.Item>Another action</NavDropdown.Item>
</NavDropdown>

And no need to write custom CSS, which is probably something we like to avoid.