Как лучше всего обрабатывать зависания в 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

Ответов: 6

Ответы (6)

Что касается 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;
  }
`


  

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

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

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

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

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

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

Мое решение

const Content = styled.div`
  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;
const ConnectButton = styled(WalletDialogButton)`
  background-color: #105b72;
  border: none;
  margin: 10vh auto;
  width: 250px;

  &:hover {
    background-color: #105b72c2;
  }
  `;

Это сработало для меня, как сказал Маркос. Я использую styled () вместо styled.something

Я действительно не знаю почему, но я ссылаюсь на пакет node_modules, где существует WalletDialogButton.

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

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

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

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

2022 WebDevInsider