reactjs - selectors - styled components vue

Apunte a otro componente con estilo al pasar el mouse por encima

Question

¿Cuál es la mejor manera de manejar los elementos emergentes en componentes con estilo? Tengo un elemento de envoltura que, cuando se cierne, revelará un botón.

Podría implementar algún estado en el componente y alternar una propiedad al pasar el mouse, pero me preguntaba si hay una mejor manera de hacer esto con cmponents con estilo.

Algo como lo siguiente no funciona, pero sería ideal:

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

A partir de los componentes con estilo v2, puede interpolar otros componentes con estilo para hacer referencia a sus nombres de clase generados automáticamente. En su caso, probablemente querrá hacer algo como esto:

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

¡Vea la documentación para más información!

El orden de los componentes es importante. Solo funcionará si Button se define arriba / antes de Wrapper .

Si está utilizando v1 y necesita hacer esto, puede solucionarlo utilizando un nombre de clase personalizado:

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

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

Dado que v2 es una actualización directa de v1, recomendaría actualizar, pero si eso no está en las tarjetas, esta es una buena solución.

Answer 2

De manera similar a la respuesta de mxstbr, también puede usar la interpolación para hacer referencia a un componente padre. Me gusta esta ruta porque encapsula el estilo de un componente un poco mejor que hacer referencia al componente hijo en el padre.

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

No podría decirte cuándo se introdujo esta función, pero funciona a partir de la v3.

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

Answer 3

la solución para mí fue esto ...

   const Content = styled.div`

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