extendTheme for Chakra-ui in Gatsby

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

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