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

Question

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>
  );
};

Answer 1

prop className将添加到NavLink的子项中,因此无法在NavLink级别访问它.该文档并不清楚这一点.因此,我们无法检查props.className ==='active'并添加样式.

相反,您可以在样式化组件中使用css供您使用:

  const LinkElem = styled(NavLink)`
  // example style
  &.active {
    color: ${props => props.theme.orange }
  }
`;

Answer 2

从react-routerv4 开始，您可以NavLink使用activeClassName样式化组件的attrs()功能设置没有任何依赖项的活动状态的样式：

export const StyledNavLink = styled(NavLink).attrs({
  activeClassName,
})`

  &.${activeClassName} {
    background: red;
  }
`;

相关文档：

• activeClassName
• attrs()

Answer 3

const StyledLink = styled(NavLink)`
  color: blue;

  &.active {
    color: red;
  }
`;

Answer 4

&.active如果你试图构建一个独立于路由器的样式组件，我并不是特别热衷于这种方法，所以我创建了asNavLink这个方法来处理这个问题：

npm install as-nav-link --save

给定一个组件：

const MyNavAnchor = styled(({
  as: T = 'a',
  active, // destructured so it is not passed to anchor in props
  ...props
}) => <T {...props} />)({
  textDecoration: 'blink',
  color: 'blue',
}, ({ active }) => (active && {
  color: 'red',
}));

你可以这样使用它：

 import asNavLink from 'as-nav-link';

 const MyNavLink = asNavLink(config)(MyNavAnchor);

它会将 active 属性传递给您的样式组件。

config是可选的，可以包含一个isActive函数（根据 ReactRouter 的 NavLink）和一个activeProp字符串（传递给组件的 prop 名称）。