web-dev-qa-db-fra.com

Utiliser l'état 'actif' de React Router in Styled Components

React Router ajoute une classe active à NavLinks lorsque vous êtes sur la page vers laquelle ils sont liés. Comment puis-je accéder à cette propriété avec des composants stylisés. J'ai besoin de styliser les éléments de menu différemment lorsque vous êtes sur leur page.

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-routerstyled-components
7
Evanss

Je ne suis pas particulièrement intéressé par le &.active approche si vous essayez de construire un composant de style indépendant du routeur, j'ai donc créé asNavLink pour gérer cela:

npm install as-nav-link --save

Étant donné un composant:

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

Vous pouvez l'utiliser comme ceci:

 import asNavLink from 'as-nav-link';

 const MyNavLink = asNavLink(config)(MyNavAnchor);

Et il transmettra l'hélice active à votre composant de style.

config est facultatif et peut inclure une fonction isActive (selon NavLink de ReactRouter) et une chaîne activeProp (le nom de prop qui est transmis à votre composant).

0
Alasdair McLeay

Le prop className est ajouté aux enfants de NavLink et n'est donc pas accessible au niveau NavLink. Les docs n'étaient pas clairs à ce sujet. Par conséquent, nous ne pouvons pas vérifier props.className === 'active' et ajouter des styles.

Au lieu de cela, vous pouvez simplement recourir à CSS à l'intérieur de composants de style pour votre usage:

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

À partir de react-router V4, vous pouvez styliser l'état actif de NavLink sans aucune dépendance en utilisant activeClassName et la fonction attrs() de Styled Components:

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

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

Documentation connexe:

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

  &.active {
    color: red;
  }
`;
1
mpontus

Composant stylé:

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

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

Usage:

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

Testé avec:

react-router-dom 5.1.2
composants de style 5.0.1

0
Khasky

Je pense que c'est la décision la plus simple.

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

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

Si vous utilisez la syntaxe d'objet dans les composants de style, vous pouvez implémenter la solution suivante: 

const activeClassName = 'nav-item-active'

export const StyledLink = styled(NavLink).attrs({
    activeClassName,
})(props => ({
    height: '20px',
    width: '20px',
    backgroundColor: 'green',
    ['&.' + props.activeClassName]: {
        backgroundColor: 'red'
    }
}))
  • Déclarez la variable avec le nom de la classe active du routeur React
  • Donnez un style à NavLink et passez comme attribut activeClassName
  • À partir des accessoires, obtenez le nomClasseActive
  • Déclarez les styles conditionnels en cas de présence de activeClassName

Vous pouvez consulter un exemple en direct dans le prochain projet StackBlitz:

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

0
Angelo Giuseppe