时间戳

首页 > 解决方案 > 在 react-bootstrap 中更改 NavDropdown 的颜色和背景颜色

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

问题描述

使用我NavDropdown的 in 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 元素的对齐方式。

标签： cssreactjstwitter-bootstrap-3react-bootstrap

解决方案

也可以提供标题文本作为 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，这可能是我们希望避免的事情。

推荐阅读