在 react-bootstrap 中更改 NavDropdown 的颜色和背景颜色

Question

使用NavDropdownin react-bootstrap，我无法设置其颜色或背景颜色的样式...

<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>

我可以使用 更改字体大小style={{ fontSize: '130%' }}，但我还想使用 ..

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

...但color并backgroundColor没有在括号内工作。

我尝试做的一件事是将<NavDropdown>元素包装在一个 style 中div，但这会弄乱 Navbar 元素的对齐方式。

Answer 1

还可以提供标题文本作为 JSX 元素。

<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>

并且不需要编写自定义 CSS，这可能是我们想要避免的事情。

Answer 2

设置 NavDropdown 的 id 并为此 id 创建 css 样式。

在反应中：

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

在CSS中：

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