gatsby - Gatsby 中 Chakra-ui 的扩展主题

Question

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

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

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

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

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

Answer 1

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

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

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