我使用 styled-components 设计了我的 NavLink。我想将一个活动类添加到活动链接，但我无法做到。我尝试了 isActive 属性但它没有用，我也尝试了 activeClassName 属性但它也没有用。请向我建议我应该怎么做才能在 styled components 的活动链接上获得活动类。我目前正在使用 ReactJs 版本 ^18.1.0 和 react-router-dom v6.3.0

导航栏.jsx

import {
  Nav,
  NavLogo,
  NavMenu,
  Navlink,
  LogoutButton,
  RegisterButton,
} from "./NavbarDesktopStyles";

const NavBarDesktop = () => {
  // links that will disappear when user authenticated
  const authLinks = (
    <Fragment>
      <li>
        <RegisterButton to="/">REGISTER</RegisterButton>
      </li>
      <li>
        <Navlink to="/">LOGIN</Navlink>
      </li>
    </Fragment>
  );

  // logout button
  const logout = (
    <Fragment>
      <li>
        <LogoutButton>LOGOUT</LogoutButton>
      </li>
    </Fragment>
  );

  // main navigation
  const mainNavigation = (
    <Fragment>
      <li>
        <Navlink to="/">HOME</Navlink>
      </li>
      <li>
        <Navlink to="/service">SERVICE</Navlink>
      </li>
      <li>
        <Navlink to="/">SUBSCRIPTION</Navlink>
      </li>
      <li>
        <Navlink to="/">ABOUT US</Navlink>
      </li>
      <li>
        <Navlink to="/">CONTACT US</Navlink>
      </li>
    </Fragment>
  );

  return (
    <Nav>
      <NavLogo to="/">
        <img src="/static/images/slvemongramdarkblue.svg" alt="logo" />
      </NavLogo>
      <NavMenu>
        <ul>
          <Fragment>{mainNavigation}</Fragment>
          <Fragment>{authLinks}</Fragment>
        </ul>
      </NavMenu>
    </Nav>
  );
};

export default NavBarDesktop;

NavBarStyle元素

export const Nav = styled.nav`
  border: 2px solid red;
  height: 5.5rem;
  display: flex;
  padding: 0.5rem 1.5rem;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
`;

export const NavbarContainer = styled.div`
  border: 1px solid blue;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  flex: 1;
`;

export const NavLogo = styled(Link)`
  border: 1px solid green;
  text-decoration: none;

  img {
    width: 4rem;
    height: 4rem;
  }
`;

export const NavMenu = styled.div`
  border: 1px solid blue;
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;

  ul {
    display: flex;
    flex: 1;
    list-style: none;
    align-items: center;
    gap: 2.5rem;

    li:nth-of-type(1) {
      margin-left: auto;
    }
    li:nth-of-type(6) {
      margin-left: auto;
    }
  }
`;

export const Navlink = styled(NavLink)`
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.05rem;
  cursor: pointer;
  position: relative;

  &::after {
    content: "";
    height: 0.125rem;
    background: #1a73e8;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.375rem;
    opacity: 0;
    transform-origin: left center;
    transition: all 270ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transform: scaleX(0);
  }

  &:hover {
    color: #1a73e8;
    &::after {
      transform: scaleX(1);
      opacity: 1;
    }
  }
`;

export const RegisterButton = styled(NavLink)`
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.05rem;
  background-color: #1a73e8;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0.62rem;
  transition: 270ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  cursor: pointer;

  &:hover {
    background-color: #135cba;
  }
`;

export const LogoutButton = styled.button``;