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

Posted 2023-02-22

【中文标题】在 react-bootstrap 中更改 NavDropdown 的颜色和背景颜色

【英文标题】：Change color & background-color of NavDropdown in react-bootstrap

【发布时间】：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。

【参考方案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
  

`