Ciblez un autre composant stylé en survol

Question

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 le faire 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;
    }
  }
`
 

Answer 1

Que de style-les composants v2 vous pouvez interpoler les autres composants de style à se référer à leur générée automatiquement les noms de classe. Dans votre cas, vous aurez probablement envie de 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. Il ne fonctionnera que si Button est défini ci-dessus avant/ Wrapper.

---

Si vous êtes à l'aide de v1 et vous avez besoin pour ce faire, vous pouvez contourner le problème en utilisant une mesure nom de la classe:

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

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

Depuis la v2, c'est une goutte de mise à niveau à partir de la v1, je recommande la mise à jour, mais si ce n'est pas dans les cartes c'est une bonne solution.

Answer 2

De même pour mxstbr réponse, vous pouvez également utiliser l'interpolation de référence d'un composant parent. J'aime cette voie, car il encapsule un composant du style un peu mieux que le référencement du composant enfant dans le parent.

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

Je ne pourrais pas vous dire quand cette fonctionnalité a été introduite, mais cela fonctionne de la v3.

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

Answer 3

la solution pour moi était la suivante ...

    const Content = styled.div`

  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;