处理样式化组件中悬停的最佳方法是什么.我有一个包装元素，悬停时会显示一个按钮.
我可以在组件上实现一些状态，并在hover上切换属性，但我想知道是否有更好的方法来使用样式化的组件来实现这一点.
下面这样的方法不起作用，但很理想:
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;
}
}
`
对于样式化组件v2，您可以插入其他样式化组件，以引用其自动生成的类名.在你的情况下，你可能会想这样做:
const Wrapper = styled.div`
&:hover ${Button} {
display: none;
}
`
更多信息请参见the documentation！
组件的顺序很重要.只有在Wrapper之前定义了Button，它才会起作用.
如果您使用的是v1，并且需要这样做，您可以通过使用自定义类名来解决这个问题:
const Wrapper = styled.div`
&:hover .my__unique__button__class-asdf123 {
display: none;
}
`
<Wrapper>
<Button className="my__unique__button__class-asdf123" />
</Wrapper>
由于v2是从v1升级而来的，我建议升级，但如果卡中没有，这是一个很好的解决方法.