React Chakra UI使用extendTheme设置Select组件_focus的borderColor不生效问题

Chakra UI 内置的 Select 组件默认 focus 状态自带了轮廓阴影样式，会覆盖你配置的 borderColor 视觉效果，同时默认 variant 的样式优先级高于 baseStyle，也会导致自定义样式不生效。

修正方案 #

1. 在_focus配置项中添加boxShadow: 'none'清除默认轮廓阴影，可选增加outline: 'none'完全清除系统默认聚焦轮廓
2. 如果使用默认的outline variant，也可以将聚焦样式配置到对应 variant 下，优先级更高

修正后的代码示例 #

select.ts

export const Select = {
  parts: ['field'],
  baseStyle: ({ colorMode }: any) => ({
    field: {
      color: 'brandLight',
      _focus: {
        borderColor: colorMode === 'dark' ? 'brandLight' : 'brand',
        // 清除默认聚焦阴影
        boxShadow: 'none',
        // 可选：清除系统默认轮廓
        outline: 'none'
      },
    },
  }),
  sizes: {},
  variants: {},
  defaultProps: {},
};

如果上述方案不生效，可以将样式配置到默认 variant 中：

export const Select = {
  parts: ['field'],
  baseStyle: ({ colorMode }: any) => ({
    field: {
      color: 'brandLight',
    },
  }),
  sizes: {},
  variants: {
    outline: ({ colorMode }: any) => ({
      field: {
        _focus: {
          borderColor: colorMode === 'dark' ? 'brandLight' : 'brand',
          boxShadow: 'none'
        }
      }
    })
  },
  defaultProps: {
    variant: 'outline'
  },
};

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