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

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

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

Как и в ответе 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;
    }
  }
`