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

87

Как лучше всего обрабатывать зависания в 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;
    }
  }
`
Nickspiel
источник
Это выглядит актуально: github.com/styled-components/styled-components/issues/142
nickspiel 06

Ответы:

165

Что касается 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
источник
17
Для любого, кто это читает, важен порядок компонентов. Это будет работать, только если Buttonопределено выше / ранееWrapper
Titan
На самом деле, другая важная документация относится к другим компонентам
L_K
Что, если бы я хотел рассчитывать на некоторые реквизиты, переданные в Button из Wrapper, чтобы при наведении курсора курсор выглядел по-разному в зависимости от этих реквизитов?
rmartrenado
29

Как и в ответе mxstbr, вы также можете использовать интерполяцию для ссылки на родительский компонент. Мне нравится этот маршрут, потому что он инкапсулирует стиль компонента немного лучше, чем ссылка на дочерний компонент в родительском.

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

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

Соответствующая ссылка: https://www.styled-components.com/docs/advanced#referring-to-other-components

Омегален
источник
4

Мое решение

const Content = styled.div`
  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;
Энрикисимо Лопес Рамос
источник
0

Это решение сработало для меня:

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

const ContentA = styled.span`
  &:hover ~ ${ContentB} {
    opacity: 1;
  }
`
Маркос Сантос Дев
источник
0

Это то, что сработало для меня

const NoHoverLine = styled.div`
  a {
    &:hover {
      text-decoration: none;
    }
  }
`
C-Dev
источник
Пожалуйста, объясните, как работает ваш код и как он это делает.
M-Chen-3