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

编程问答 2022-06-01

问题描述

我正在尝试扩展我的主题（修改默认组件）并将我的新默认道具传递给 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？ 感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

chakrachakra-uijavascriptreactjsreactjs