Chakra：不能覆盖全局边框样式答案

【问题标题】：Chakra: can't override global border styleChakra：不能覆盖全局边框样式
【发布时间】：2022-08-23 11:01:56
【问题描述】：

无论我尝试什么，Chakra UI 都不会让我覆盖全局边框样式。

我试过把它放在任何地方：

const theme = extendTheme({
  styles: {
    global: (props: StyleFunctionProps) => ({
      body: {
        borderColor: \'black !important\',
        border: \'1px solid black !important\',
        defaultProps: {
          borderColor: \'black !important\',
          border: \'1px solid black !important\',
        },
      },
      base: {
        borderColor: \'black !important\',
        border: \'1px solid black !important\',
        defaultProps: {
          borderColor: \'black !important\',
          border: \'1px solid black !important\',
        },
      },
      baseStyle: {
        borderColor: \'black !important\',
        border: \'1px solid black !important\',
      },
      borderColor: \'black !important\',
      border: \'1px solid black !important\',
      defaultProps: {
        borderColor: \'black !important\',
        border: \'1px solid black !important\',
      },
    }),
    // global: {
    //   border: \'1px solid black\',
    //   borderColor: \'black !important\',
    //   borderWidth: \'2px\',
    // },
    borderColor: \'black !important\',
    border: \'1px solid black !important\',
    defaultProps: {
      borderColor: \'black !important\',
      border: \'1px solid black !important\',
    },
  },
  borderColor: \'black !important\',
  border: \'1px solid black !important\',
  components: {
    Box: {
      baseStyle: {
        border: \'1px solid black !important\',
        borderColor: \'black !important\',
      },
      defaultProps: {
        border: \'1px solid black !important\',
        borderColor: \'black !important\',
      },
      border: \'1px solid black !important\',
      borderColor: \'black !important\',
    },
  },
});

边框仍然被一些神奇的默认参数覆盖。这个集合到底在哪里，你如何禁用它？

标签： css chakra-ui

【解决方案1】：

const theme = extendTheme({
  styles: {
    global: {
      "*": {
        borderColor: "red"
      }
    }
  }
});

这将覆盖所有元素的borderColor 属性。唯一需要注意的是，如果您为组件定义了border 属性，它将不会继承全局borderColor。

示例：https://codesandbox.io/s/global-bordercolor-style-hzofpv?file=/src/index.tsx

【讨论】：