Нацелить еще один стилизованный компонент при наведении

Каков наилучший способ обработки зависаний в стилизованных компонентах. У меня есть элемент обертывания, который при наведении курсора откроет кнопку.

Я мог бы реализовать некоторое состояние на компоненте и переключить свойство на hover, но задавался вопросом, есть ли лучший способ сделать это с помощью стилизованных-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;
    }
  }
`

Ответы

Ответ 1

Как и в стиле-v2, вы можете интерполировать другие стилизованные компоненты, чтобы ссылаться на их автоматически генерируемые имена классов. В вашем случае вы, вероятно, захотите сделать что-то вроде этого:

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

Подробнее см. документацию.

Если вы используете v1, и вам нужно это сделать, вы можете обойти его, используя имя пользовательского класса:

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

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

Так как v2 - это обновление с версии v1, я рекомендую обновлять, но если это не в карточках, это прекрасный способ обхода.