web-dev-qa-db-fra.com

Ciblez un autre composant stylé en survol

Quelle est la meilleure façon de gérer les survols dans des composants stylés. J'ai un élément d'emballage qui, lorsqu'il est survolé, révélera un bouton.

Je pouvais implémenter un état sur le composant et basculer une propriété en survol, mais je me demandais s'il existait un meilleur moyen de faire cela avec styled-cmponents.

Quelque chose comme ce qui suit ne fonctionne pas mais serait idéal:

const Wrapper = styled.div`
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25);
  &:not(:last-child) {
    margin-bottom: 2rem;
  }
  &:hover {
    .button {
      display: none;
    }
  }
`
reactjsstyled-components
60
nickspiel

À partir de styled-components v2, vous pouvez interpoler d'autres composants stylés pour qu'ils se réfèrent à leurs noms de classe générés automatiquement. Dans votre cas, vous voudrez probablement faire quelque chose comme ceci:

const Wrapper = styled.div`
  &:hover ${Button} {
    display: none;
  }
`

Voir la documentation pour plus d'informations!

L'ordre des composants est important. Cela fonctionnera uniquement si Button est défini avant/avant Wrapper.

Si vous utilisez v1 et que vous avez besoin de le faire, vous pouvez le contourner en utilisant un nom de classe personnalisé:

const Wrapper = styled.div`
  &:hover .my__unique__button__class-asdf123 {
    display: none;
  }
`

<Wrapper>
  <Button className="my__unique__button__class-asdf123" />
</Wrapper>

Étant donné que la v2 est une mise à niveau à partir de la v1, je vous recommande de la mettre à jour, mais si cela ne figure pas dans les cartes, la solution de rechange est simple.

104
mxstbr

De la même manière que la réponse de mxstbr, vous pouvez également utiliser l'interpolation pour référencer un composant parent. J'aime cette route car elle résume un peu mieux le style d'un composant que de référencer le composant enfant dans le parent.

const Button = styled.button`
  ${Wrapper}:hover & {
    display: none;
  }
`;

Je ne saurais vous dire quand cette fonctionnalité a été introduite, mais cela fonctionne à partir de la v3.

Lien pertinent: https://www.styled-components.com/docs/advanced#referring-to-other-components

15
Omegalen

la solution pour moi était la suivante ...

   const Content = styled.div`

  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;
2
Enrikisimo Lopez Ramos