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

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

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

`

Answer 4

对于您选择的选择器。您提供的代码结构中不存在这一点。您是如何想出选择器的？