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

设置NavDropdown的ID，并为此ID创建CSS样式。

反应中：

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

在CSS中：

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

Answer 2

还可以将标题文本作为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 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
  }

`

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

3 个答案: