0

I'm trying to extend my theme (modify default component) and pass my new default props to the Input component. I need focusBorderColor to change by current color mode. I tried to pass a function to defaultProps parameter but this broke all styles on my Input component:

const theme = extendTheme({
  components: {
    Input: {
      defaultProps: props => ({
        variant: 'filled',
        focusBorderColor: props.colorMode === 'light' ? 'gray.200' : 'gray.600',
      }),
    },
  },
})

I also tried to style my component by baseStyle property and this works, but all default base styles are overwritten by passing a function to it. I need to add property to baseStyle and preserve default baseStyles (only extend but with color mode).

const theme = extendTheme({
  components: {
    Input: {
      baseStyle: props => ({
        field: {
          width: props.colorMode === 'dark' ? '50%' : '80%',
        },
      }),
    },
  },
})

Is there any way how to pass colorMode to default props? Or is there any way how to properly extend baseStyle with function declaration without losing default baseStyles? Thanks for any help!

nbsp
  • 118
  • 6

0 Answers0