在样式化组件中使用来自 React Router 的 'active' 状态

Question

当你在他们 link 到的页面上时，React Router 会添加一个 active class 到 NavLinks。如何使用样式化组件访问此属性。当您在他们的页面上时，我需要以不同的方式设置菜单项的样式。

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

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

  &.active {
    color: red;
  }
`;

Answer 3

如果您尝试构建独立于路由器的样式化组件，我不是特别喜欢 &.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 名称）。

Answer 4

从 react-router v4 开始，您可以使用 activeClassName 和 Styled Components 的 attrs() 函数为 NavLink 的活动状态设置样式而无需任何依赖：

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

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

相关文档：

Answer 5

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

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

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

Answer 6

如果你在styled-components中使用对象语法，你可以实现下一个解决方案：

const activeClassName = 'nav-item-active'

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

使用 React 路由器 class 的活动名称声明变量
设置 NavLink 的样式并作为属性 activeClassName 传递
从道具中获取 activeClassName
在存在 activeClassName 的情况下声明条件样式

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

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

Answer 7

样式化组件：

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

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

用法：

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

测试：

反应路由器-dom 5.1.2
样式组件 5.0.1

Answer 8

react-router 现在有 activeStyle 道具，可以用来轻松地设置 active link 样式：

<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 9

您添加到 NavLink 的 activeClassName 的字符串将在您点击特定路线后加入 className。由于样式组件支持纯 css、

&.{yourActiveClassName} { #css goes here}

应该可以。

在样式化组件中使用来自 React Router 的 'active' 状态

Use 'active' state from React Router in Styled Components

react-router

styled-components