gatsby - 盖茨比中 Chakra-ui 的扩展主题

Question

我在 Gatbsy 工作，当我尝试使用文件夹theme.js中的阴影文件覆盖核心 Chakra 主题时，gatsby-plugin-chakra-ui它没有任何效果。

请问有什么想法吗？我在用

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

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

编辑：修改主题适用于 Button 组件，但不适用于 Input

Answer 1

要自定义 Input 元素字段，您只需field在对象内添加属性outline，如下所示：

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

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