React 的 Chakra UI：更改 _focus borderColor 不起作用

Question

我使用

extendTheme()

在 Chakra UI 上为 React 设置了默认主题。 当我尝试像这样更改 Select 组件的样式时，

_focus

样式不会应用，而

color

的行为符合预期。

参考资料

• Chakra-UI 风格道具
• 如何全局更改占位符颜色？

字幕

代码

索引.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: {},
};

Answer 1

这对我有用。

 _focusVisible={{
      outline: "none",
 }}

Answer 2

要更改焦点边框颜色，您必须访问

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

希望这对您的项目有帮助

Answer 3

这对我有用

const baseStyle = definePartsStyle({ field: { _focusVisible: { 'border-color': '#F16821 !important', 'box-shadow': '0 0 0 1px #F16821 !important' } } });

Answer 4

如果您想更改单个输入的焦点边框颜色，有一个内置解决方案：

https://v2.chakra-ui.com/docs/components/input#change-the-focus-and-error-border-colors

<Input focusBorderColor='pink.400' />