Question

当您在链接到的页面上时，React Router会向NavLinks添加active类。如何使用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级别访问它。 docs对此并不清楚。因此，我们无法检查props.className ==='active'并添加样式。

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

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

Answer 2

从react-router v4开始，您可以使用NavLink和样式化组件的activeClassName函数来对attrs()的活动状态进行样式设置而没有任何依赖性：

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

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

相关文档：

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

它将把活动道具传递到您的样式化组件。

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

Answer 5

如果您在样式化组件中使用对象语法，则可以实现下一个解决方案：

const activeClassName = 'nav-item-active'

export const StyledLink = styled(NavLink).attrs({
    activeClassName,
})(props => ({
    height: '20px',
    width: '20px',
    backgroundColor: 'green',
    ['&.' + props.activeClassName]: {
        backgroundColor: 'red'
    }
}))

使用反应路由器活动类的名称声明变量
设置NavLink的样式，并将其作为属性activeClassName传递
从道具中获取activeClassName
在有activeClassName的情况下声明条件样式

您可以在下一个StackBlitz项目中查看实时示例：

https://stackblitz.com/edit/react-hcudxz

Answer 6

样式化的组件：

import { NavLink } from 'react-router-dom';

export const MyNavLink = styled(NavLink)`
  &.${props => props.activeClassName} {
    color: red;
  }
`;

用法：

<MyNavLink to="/dashboard" activeClassName="anyClassNameWillWork">Dashboard</MyNavLink>

经过测试：

反应路由器域5.1.2
样式化组件5.0.1

Answer 7

反应路由器现在具有activeStyle个道具，可用于轻松设置活动链接的样式：

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>

具有样式化组件：

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

<LinkElem
  activeStyle={{
    fontWeight: 'bold',
    color: 'red',
  }}
></LinkElem>;

Answer 8

您添加到 NavLink 的 activeClassName 的字符串稍后会在您到达特定路线时加入到 className。由于样式组件支持纯 css，

&.{yourActiveClassName} { #css goes here}

应该可以。

Answer 9

我认为这是最简单的决定。

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

  &.${props => props.activeClassName} {
    color: red;
  }
`;

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

9 个答案: