Наведіть інший стильовий компонент при наведенні

Який найкращий спосіб обробляти зависання у стилізованих компонентах. У мене є обгортковий елемент, який при наведенні покаже кнопку.

Я міг реалізувати деякий стан на компоненті і перемикати властивість при наведенні, але цікавився, чи є кращий спосіб зробити це за допомогою styled-cmponents.

Щось на зразок наступного не працює, але було б ідеально:

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

Що стосується styled-components v2, ви можете інтерполювати інші стилізовані компоненти, посилаючись на їх автоматично генеровані імена класів. У вашому випадку ви, мабуть, захочете зробити щось подібне:

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

Докладнішу інформацію дивіться у документації !

Важливий порядок компонентів. Це буде працювати, лише якщо Buttonце визначено вище / раніше Wrapper.

Якщо ви використовуєте v1, і вам потрібно це зробити, ви можете обійти це за допомогою спеціального імені класу:

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

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

Оскільки v2 - це оновлення, яке випадає з версії 1, я б рекомендував оновити, але якщо цього немає в картках, це чудове рішення.

Подібно до відповіді mxstbr, ви також можете використовувати інтерполяцію для посилання на батьківський компонент. Мені подобається цей маршрут, оскільки він інкапсулює стилістику компонента трохи краще, ніж посилання на дочірній компонент у батьківському.

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

Я не міг сказати вам, коли ця функція була введена, але це працює з v3.

Відповідне посилання: https://www.styled-components.com/docs/advanced#referring-to-other-components

Моє рішення

const Content = styled.div`
  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;

Це рішення спрацювало для мене:

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

const ContentA = styled.span`
  &:hover ~ ${ContentB} {
    opacity: 1;
  }
`

Це те, що мені вдалося

const NoHoverLine = styled.div`
  a {
    &:hover {
      text-decoration: none;
    }
  }
`