如何为Chakra-UI中带leftIcon/rightIcon属性的Button组件内图标设置样式？

全局基础样式（所有Button图标生效） #

直接在extendTheme()的components配置中，为Button组件的icon节点设置样式，无需手动操作chakra-button__icon类：

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        // 你的Button核心样式
        bg: 'blue.500',
        color: 'white',
        // 配置图标间距
        icon: {
          marginInlineEnd: '0.75rem', // 左侧图标与文字的间距
          marginInlineStart: '0.75rem', // 右侧图标与文字的间距
        },
      },
    },
  },
});

export default theme;

特定变体的图标样式 #

如果只需给某类Button（如solid变体）的图标改样式：

const theme = extendTheme({
  components: {
    Button: {
      variants: {
        solid: {
          icon: {
            marginInlineEnd: '1rem',
            marginInlineStart: '1rem',
          },
        },
      },
    },
  },
});

区分左右图标单独设置 #

若要给左侧、右侧图标设置不同间距，可通过props.iconPosition判断：

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: (props) => ({
        icon: {
          marginInlineEnd: props.iconPosition === 'left' ? '0.5rem' : 0,
          marginInlineStart: props.iconPosition === 'right' ? '0.5rem' : 0,
        },
      }),
    },
  },
});

原理说明 #

Chakra UI的Button组件已将leftIcon/rightIcon对应的元素关联到icon样式节点，通过组件配置直接修改该节点样式即可覆盖默认规则，无需手动编写类选择器。

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