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

Question

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

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

Answer 1

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

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

См the documentation для получения дополнительной информации!

---

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

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

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

Поскольку v2 капля в обновлении от v1 I» d рекомендуем обновлять, но если это не в карточках, это прекрасный способ обхода.