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

Question

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

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

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

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

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

Answer 1

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

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

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