小编Boy*_*oyX的帖子

如何在 NavLink 样式的组件上制作 activeClass

大家好,我在活动链接方面遇到了麻烦,我使用样式组件。我希望当我处于活动链接时我的链接为红色,但没有任何效果。我尝试了 ActiveCLassName 但这也不起作用。

有人能帮我吗?

多谢

const NavLink = styled(Link)`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 10px;
list-style-type: none;
text-decoration: none;
color: black;
background-color: yellow;
border: 0.1px solid lightgrey;
`;

export default function Nav() {
  return (
<NavWrapper>
  <UlNav>
    <LiNav>
      <NavLink to="/Burgers">Burgers</NavLink>
    </LiNav>
    <LiNav>
      <NavLink to="/Burgers">Pizza</NavLink>
    </LiNav>
    <LiNav>
      <NavLink to="/Burgers">Drinks</NavLink>
    </LiNav>
  </UlNav>
</NavWrapper>
)};
Run Code Online (Sandbox Code Playgroud)

reactjs react-router styled-components

4
推荐指数
1
解决办法
1808
查看次数

标签 统计

react-router ×1

reactjs ×1

styled-components ×1