CODEWITHSUNDEEP
csschakra-ui
ilmoi
ilmoi

Reputation: 2534

Chakra: can't override global border style

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? enter image description here

Upvotes: 1

Views: 2682

Answers (2)

nizz0k
nizz0k

Reputation: 521

So, maybe I'm wrong with this, but the object in Chakra foundations is called borders. I recently had a bunch of trouble overriding the z-index values for the Modal and Overlay components. This file appears to mainly deal with the size and stroke, but I assume you could add your color here as well. In my case, the object was titled zIndices.

Upvotes: 0

byoda
byoda

Reputation: 171

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

Upvotes: 1

Related Questions