相关疑难解决方法(0)

使用样式组件中React Router的"活动"状态

active当您在链接到的页面上时,React Router会为NavLinks 添加一个类.如何使用Styled Components访问此属性.当你在他们的页面上时,我需要以不同的方式设置菜单项的样式.

const LinkElem = styled(NavLink)`
  font-size: 16px;
  font-weight: 400;

  ${props => console.log(props)};

  &:hover {
    color: ${props => props.theme.colorOrange};
  }
`;

const Menu = props => {
  const { me } = props;
  return (
    <MenuElem>
      <li>
        {me ? (
          <LinkElem to="/account">Account</LinkElem>
        ) : (
          <LinkElem to="/login">Log in / sign up</LinkElem>
        )}
      </li>
    </MenuElem>
  );
};
Run Code Online (Sandbox Code Playgroud)

react-router styled-components

6
推荐指数
4
解决办法
5018
查看次数

标签 统计

react-router ×1

styled-components ×1