Chakra UI扩展默认主题时设置Input组件默认borderColor不生效如何解决

Chakra UI 组件的全局默认样式需要遵循固定的配置层级，所有基础默认样式要放在baseStyle字段下；同时Input属于多部分组件，输入框本身的样式需要定义在baseStyle的field子属性中，你之前直接把borderColor写在Input配置根层级，所以不会生效。

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

const config = {
  initialColorMode: "light",
  useSystemColorMode: false,
};

const theme = extendTheme({
  config,
  components: {
    Input: {
      baseStyle: {
        field: {
          borderColor: "teal",
          // 如果需要同步修改聚焦状态的边框颜色可以保留下方配置
          _focus: {
            borderColor: "teal.600",
            boxShadow: "0 0 0 1px teal.600"
          }
        }
      }
    },
  },
});

export default theme;

• 如果你同时使用了Chakra UI的InputGroup、InputLeftAddon等关联组件，需要单独为这些组件配置样式才会统一生效
• 如果修改后还是不生效，检查项目入口处的ChakraProvider是否正确引用了你自定义的theme对象

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