javascript - 默认道具中的 Chakra UI 颜色模式

Question

我正在尝试扩展我的主题（修改默认组件）并将我的新默认道具传递给 Input 组件。我需要通过当前颜色模式更改 focusBorderColor。我试图将一个函数传递给 defaultProps 参数，但这破坏了我的 Input 组件上的所有样式：

const theme = extendTheme({
  components: {
    Input: {
      defaultProps: props => ({
        variant: 'filled',
        focusBorderColor: props.colorMode === 'light' ? 'gray.200' : 'gray.600',
      }),
    },
  },
})

我还尝试通过 baseStyle 属性为我的组件设置样式，这很有效，但是通过将函数传递给它，所有默认的基本样式都被覆盖了。我需要向 baseStyle 添加属性并保留默认的 baseStyles（仅扩展但具有颜色模式）。

const theme = extendTheme({
  components: {
    Input: {
      baseStyle: props => ({
        field: {
          width: props.colorMode === 'dark' ? '50%' : '80%',
        },
      }),
    },
  },
})

有什么方法可以将 colorMode 传递给默认道具？或者有什么方法可以在不丢失默认baseStyles的情况下使用函数声明正确扩展baseStyle？谢谢你的帮助！