Styled-System中伪类的使用？如何为按钮添加:hover悬停效果？

嘿，这个问题我之前刚踩过坑！Styled-System确实没在官方文档里特意讲伪类的用法，但其实它的_hover属性就是专门用来处理悬停状态的，用法和你平时写Styled-System样式完全一致～

你只需要在_hover的对象参数里，填入你想要在悬停时生效的样式属性就行，这些属性和Styled-System常规的样式属性是通用的——不管是用主题里的颜色变量、间距值，还是直接写CSS属性都可以。

给你写个实际的示例，比如给按钮添加悬停时加深背景色、白色文字，再加一点微动画提升交互感：

<Button 
  // 按钮的常规样式
  bg="blue.500"
  color="white"
  px={4}
  py={2}
  borderRadius="md"
  // 悬停时的样式
  _hover={{ 
    bg: 'blue.600', 
    color: 'white',
    transform: 'translateY(-2px)',
    boxShadow: 'lg',
    transition: 'all 0.2s ease-in-out'
  }}
>
  点击我
</Button>

顺带提一句，除了_hover，Styled-System还支持其他伪类和状态的属性，比如_active（点击激活状态）、_focus（聚焦状态）、_disabled（禁用状态），用法都是一样的——直接在组件上传递对应的属性并填入样式对象就行。

内容的提问来源于stack exchange，提问作者Xen_mar