如何在分配有 leftIcon/rightIcon 道具 [Chakra-UI] 的 Button 组件内设置图标样式？答案

【问题标题】：How to style icons inside Button component which assigned with leftIcon/rightIcon props [Chakra-UI]?如何在分配有 leftIcon/rightIcon 道具 [Chakra-UI] 的 Button 组件内设置图标样式？
【发布时间】：2023-02-01 21:14:18
【问题描述】：

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

【问题讨论】：

好像是不可能的。看看Buttonsource code，它直接在ButtonIcon中分别呈现leftIcon和rightIcon，通过margin样式。显然这已经在this issue 中讨论过了。最终，您可以构建自己的 ButtonWithIcon 组件，该组件更加可定制

标签： css reactjs typescript chakra-ui

【解决方案1】：

您可以将其添加到 sx 道具中，如下所示。

<按钮sx={{ '.chakra-button__icon *': { color: 'red' } }}rightIcon={<ArrowForwardIcon />}>注册</Button>

【讨论】：