我用extendTheme()在Chakra UI上为React设置了默认主题。当我尝试像这样更改Select组件的样式时，_focus样式不会应用，而color的行为符合预期。

参考

• Chakra-UI风格 prop
• How to change the placeholder color globally?

字幕

编码

index.ts

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

export const theme = extendTheme({
  colors: {
    brand: '#008561',
    brandLight: '#00b485',
  },
  components: {
    Select,
  },
});

select.ts

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