css - 如何为分配了 leftIcon/rightIcon 属性的 Button 组件中的图标设置样式 [Chakra-UI]？

我正在尝试通过 extendTheme() 来为 <Button/> 组件设置样式。核心样式运行良好，任何颜色、尺寸、间距的修改都能完美生效。但是我在使用 leftIcon/rightIcon 属性为 <Button/> 组件设置样式时遇到困难。总体来说，我需要更新按钮的图标部分，即图标的 margin-inline-start/margin-inline-end 属性，但它与 Chakra-UI 中其他多部分组件不同，因为我们可以在元素上看到 "chakra-button__icon" 类。

答案＃1

你可以像下面这样在 sx 属性中添加它。

<Button `sx={{ '.chakra-button__icon *': { color: 'red' } }}` `rightIcon={<ArrowForwardIcon />}`>Sign up`</Button>`

答案＃2

以这里的 CloseIcon 为例，<Button rightIcon={<CloseIcon name="close-icon" />}><CloseIcon name="close-icon" /></Button> 使用这些 rightIcon 或 leftIcon 会给你的 span 标签带来令人恼火的样式，我们花了很长时间才去除它。

相反，我只会在按钮内添加图标，例如 <Button><CloseIcon name="close-icon" /></Button>，并根据需要自定义按钮样式