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

Question

和我的NavDropdown在 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>样式中的元素 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，这可能是我们希望避免的事情。