Chakra: can't override global border style

Question

No matter what I try, Chakra UI won't let me override global border style.

I've tried putting it everywhere:

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',
    },
  },
});

Border still overwritten by some magical default parameter. Where on earth is this set and how do you disable it?

user_19391114 · Answer

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

This will override the borderColor property of all elements. The only thing to keep an eye on is that if you define the border property for a component, it won't inherit the global borderColor.

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

Chakra: can't override global border style

1 Answers