スタイル付きコンポーネントのReact Routerから「アクティブ」状態を使用する

bugfix> react-router > 投稿

React Routerは active を追加しますあなたがリンクしているページにいるとき、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>
  );
};

react-router

styled-components

回答 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 classNameはNavLinkの子に追加されるため、NavLinkレベルではアクセスできません。ドキュメントはこれについて明確ではありませんでした。したがって、props.className === 'active'を確認してスタイルを追加することはできません。

    代わりに、スタイル付きコンポーネント内でcssを使用するだけで使用できます。

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



  • const StyledLink = styled(NavLink)`
  color: blue;
  &.active {
    color: red;
  }
`;

  • react-router 現在  v4、 NavLink のアクティブ状態をスタイルできます   activeClassName を使用した依存関係なし  およびスタイル付きコンポーネントの attrs()  関数：

    export const StyledNavLink = styled(NavLink).attrs({
  activeClassName,
})`
  &.${activeClassName} {
    background: red;
  }
`;

    関連ドキュメント：

    activeClassName

    attrs()

あなたの答え

関連記事