extendTheme for Chakra-ui in Gatsby

user_7302406 0
Viewed 508

I am working in Gatbsy and when I try and override the core Chakra theme using a shadow theme.js file in a gatsby-plugin-chakra-ui folder it has no effect.

Any thoughts please? I am using

import { extendTheme } from '@chakra-ui/core'

const theme = extendTheme({
        components: {
                Input: {
                        variants: {
                                outline: {
                                        borderColor: 'blue.500',
                                },
                        },
                },
        },
})

EDIT: amending the theme works with the Button component, but not the Input

gatsby-plugin chakra-ui gatsby
1 Answers

For customizing the Input element field, you just need to add the field property inside the outline object, like this way:

import { extendTheme } from '@chakra-ui/core'

const theme = extendTheme({
  components: {
    Input: {
      variants: {
        outline: {
          field: {
            borderColor: 'blue.500',
          },
        },
      },
    },
  },
})

user_77240110
Related