用于 React 的 Chakra UI：更改 _focus 边框颜色不起作用答案

【问题标题】：Chakra UI for React: change _focus borderColor not work用于 React 的 Chakra UI：更改 _focus 边框颜色不起作用
【发布时间】：2021-11-19 22:15:10
【问题描述】：

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

参考

字幕

代码

index.ts

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

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

选择.ts

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

【问题讨论】：

标签： javascript reactjs chakra-ui

【解决方案1】：

要更改焦点边框颜色，您必须访问focusBorderColor 选择器，

这可以在您要更改的variant 中设置，也可以在您的组件主题的defaultProps 选择器中设置。

defaultProps: {
  focusBorderColor: 'gray.500',
},

我看到的另一种解决方法是将全局阴影设置为脉轮颜色，请注意，您定义的任何颜色也可以像下面的示例一样访问

const colors = { mycolor: "#F39C12" }

const shadows = {
  outline: '0 0 0 3px var(--chakra-colors-mycolor-500)',
};

const theme = extendTheme({ config, colors, styles, components, shadows });

在此处找到解决方法：Chakra-UI Issue-663

希望这对您的项目有所帮助

【讨论】：