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

【问题标题】：Change color & background-color of NavDropdown in react-bootstrap在 react-bootstrap 中更改 NavDropdown 的颜色和背景颜色
【发布时间】：2018-11-30 22:02:30
【问题描述】：

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

<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 中，但这会打乱导航栏元素的对齐方式。

【问题讨论】：

我在 devtools 中看到样式被默认重写了应用于链接文本的 css。

标签： css reactjs twitter-bootstrap-3 react-bootstrap

【解决方案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，这可能是我们希望避免的。

【讨论】：

【解决方案2】：

设置你的 NavDropdown 的 id 并为这个 id 创建一个 css 样式。

在反应中：

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

在css中：

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

【讨论】：

这不会改变下拉菜单本身的颜色，只会改变父下拉链接的背景。

【解决方案3】：

使用 chrome 中的检查元素工具检查后。我通过在我的 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
  }

【讨论】：