javascript - ReactJS 在反应引导导航栏中更改所选导航链接的背景颜色

Question

所以我有一个 react-bootstrap 导航栏。我需要更改所选导航链接的背景颜色。我的 Css 仅在导航链接标题周围着色，而不是该导航链接占用的整个空间

我的导航栏：

矿

应该如何：

必需的

我的导航条码：

const NavBar = () => {

    let tabs = [
        { name: "Warehouses" },
        { name: "Dispatched to Process" },
        { name: "Sales" },
        { name: "User Manager" },
        { name: "Time Tracking" }
    ];  
    return (
        <>
            <Navbar fixed="top" bg="primary" variant="dark">
                <Nav className="me-auto">
                    {
                        Object.keys(tabs).map(id => {
                            return <NavLink className="my-navbar" to={"/" + tabs[id].name}> {tabs[id].name} </NavLink>
                        })
                    }
                </Nav>
            </Navbar>
        </>
    );
}

export default NavBar;

最后是我的 nav.css

.my-navbar{
  height: 100%;
  margin: 15px  15px 15px  15px;
  color: white;
  font-size: 14px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-decoration: none;
}

.me-auto{
    height: 100%;
}
.my-navbar:visited {
  height: 100%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
}

.active {
  height: 100%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  font-size: 14px;
  background-color: #61fb69;
}

标签： javascriptcssreactjsbootstrap-4react-bootstrap

Answer 1

react-bootstrap 中的导航栏已经有自己的顶部/底部填充，因此您必须将其移除并给它一个高度以补偿移除的填充。

接下来，您必须将 navitems 的所有父元素的高度设置为 100%，以便它们占据整个高度

height: 100%;
align-items: center;

可以看到这里，默认不占全高

为 .active 类添加这个 CSS

height: 100%;
align-items: center;
font-weight: 800;
display: flex;
background-color: #61fb69;

这是我能够实现的。