0

I'm working on editing the theme for our app and I've noticed something very strange. I'm trying to edit the Input component's border-color while it's being focused on. However, nothing seems to override the default color that's given. I'm wondering if this is a bug or if I'm just missing something. Example below

export const theme = extendTheme({
components: {

    Input: {
        baseStyle: {
            borderColor: baseColors.flamingo, <--this works
            borderRadius: 20,
            backgroundColor: 'white',
            _focus: {
                borderColor: baseColors.flamingo, <--this doesn't work
                backgroundColor: baseColors.flamingo <-- this does work
            }
        },
    },
Brandon-Perry
  • 366
  • 4
  • 18

1 Answers1

1

Found the solution:

add this to the component object. _focus is a prop, not a style key

defaultProps: {
                _focus: {
                    style: {
                        borderColor: baseColors.flamingo
                    }
                }
            }
Brandon-Perry
  • 366
  • 4
  • 18