Используйте «активное» состояние из React Router в Styled Components - PullRequest
Новая
       10

Используйте «активное» состояние из React Router в Styled Components

0 голосов
/ 07 мая 2018

React Router добавляет класс active к ссылкам 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>
  );
};

Ответы [ 3 ]

0 голосов
/ 08 мая 2018 
const StyledLink = styled(NavLink)`
  color: blue;

  &.active {
    color: red;
  }
`;
0 голосов
/ 19 октября 2018

Я не особенно заинтересован в подходе &.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 (согласно NavLink ReactRouter) и строку activeProp (имя пропуска, которое передается вашему компоненту).

0 голосов
/ 07 мая 2018

Прописка className добавляется к дочерним элементам NavLink, поэтому она недоступна на уровне NavLink. В документах не было ясно об этом. Поэтому мы не можем проверить props.className === 'active' и добавить стили.

Вместо этого вы можете просто использовать css внутри стилизованных компонентов для вашего использования: 

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