如何更改 react-bootstrap 中 NavBarDropdown 中所选项目的活动颜色?

huangapple go评论60阅读模式
英文:

How to change the active colour of the selected item in NavBarDropdown of react-bootstrap?

问题

I am using the react-bootstrap NavdropDown component from here. I had used it properly but I am unable to set the custom background color of the navdrop-down items when it's in normal & active (selected) state.

Like I would like to change from blue to any other color when the option is selected as shown in the image. 如何更改 react-bootstrap 中 NavBarDropdown 中所选项目的活动颜色?

How can I do so? (Even using CSS can also help if there's no inbuilt class/attribute for this in Bootstrap).

Navbar.js

<Navbar bg="dark" variant="dark">
  <Container>
    <Navbar.Brand href="/master">Hi {user.sub}</Navbar.Brand>
    <Nav className="me-auto">
      // Other navigation items...
      <NavDropdown drop="down-centered" menuVariant="dark" title="3P-Verticals" id="navbarScrollingDropdown">
        {
          verticals_3p.map((item) => {
            return (
              <NavDropdown.Item key={item.val}>
                <Nav.Link onClick={() => props.setTenantName(item.val)}>{item.label}</Nav.Link>
              </NavDropdown.Item>
            )
          })
        }
      </NavDropdown>
      // Other navigation items...
    </Nav>
  </Container>
</Navbar>

I tried this in App.css but it's not working.

#navbarScrollingDropdown:active {
  font-weight: bold;
}
英文:

I am using the react-bootstrap NavdropDown component from here. I had used it properly but I am unable to set the custom background colour of the navdropdow-items when its in normal & active i.e. selected state .

Like I would like to change from blue to any other colour when option is selected as shown in image.如何更改 react-bootstrap 中 NavBarDropdown 中所选项目的活动颜色?

how can I do so ? (even using css can also help if there's no inbuilt class/attribute for this in bootstrap).

Navbar.js

      &lt;Navbar bg=&quot;dark&quot; variant=&quot;dark&quot;&gt;
        &lt;Container&gt;
          &lt;Navbar.Brand href=&quot;/master&quot;&gt;Hi {user.sub}&lt;/Navbar.Brand&gt;
          &lt;Nav className=&quot;me-auto&quot;&gt;
            
            .
            .
            .
            .
            .
            .

            &lt;NavDropdown drop=&quot;down-centered&quot; menuVariant=&quot;dark&quot;  title=&quot;3P-Verticals&quot; id=&quot;navbarScrollingDropdown&quot;&gt;
              {
                verticals_3p.map((item)=&gt; {
                  return(
                    &lt;NavDropdown.Item key={item.val}&gt;
                      &lt;Nav.Link onClick={()=&gt;props.setTenantName(item.val)}&gt;{item.label}&lt;/Nav.Link&gt;
                    &lt;/NavDropdown.Item&gt;
                  )
                })
              }  
            &lt;/NavDropdown&gt;
            .
            .
            .
            .
            .
            .
          &lt;/Nav&gt;
        &lt;/Container&gt;
      &lt;/Navbar&gt;

I tried this in App.css but its not working.

#navbarScrollingDropdown:active {
  font-weight: bold;
}

答案1

得分: 1

这是一个关于React Bootstrap和CSS选择器的内容,其中提到了<NavDropdown><NavDropdown.Item>的ID以及如何处理CSS选择器的问题。同时,提供了一个覆盖Bootstrap默认CSS选择器的示例代码。你还可以在CodeSandbox演示中查看示例。

英文:

It's &lt;NavDropdown&gt; that has an ID of navbarScrollingDropdown whereas it's the &lt;NavDropdown.Item&gt; that becomes active when selected. Also with how react-boostrap renders the DOM you end up with the following HTML:

&lt;div menuvariant=&quot;dark&quot; class=&quot;nav-item show dropdown&quot;&gt;
  &lt;a aria-haspopup=&quot;true&quot; aria-expanded=&quot;true&quot; id=&quot;navbarScrollingDropdown&quot; href=&quot;#&quot; class=&quot;dropdown-toggle nav-link&quot; role=&quot;button&quot;&gt;3P-Verticals&lt;/a&gt;
  &lt;div aria-labelledby=&quot;navbarScrollingDropdown&quot; class=&quot;dropdown-menu show&quot; style=&quot;margin: 0px;&quot;&gt;
    &lt;a href=&quot;#action/3.1&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
    &lt;a href=&quot;#action/3.2&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
    &lt;a href=&quot;#action/3.3&quot; class=&quot;dropdown-item active&quot;&gt;Something&lt;/a&gt;
    &lt;div class=&quot;dropdown-divider&quot; role=&quot;separator&quot;&gt;&lt;/div&gt;
    &lt;a href=&quot;#action/3.4&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

so even if you used the CSS selector #navbarScrollingDropdown .active it wouldn't work as the popup menu div sits outside of the menu item element with the ID navbarScrollingDropdown.

You could override the CSS selector that is used by Bootstrap:

.dropdown-item.active,
.dropdown-item:active {
  background-color: green !important;
}

Here's a working CodeSandbox demo.

huangapple
  • 本文由 发表于 2023年3月9日 18:49:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/75683568.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定