如何在Chakra UI自定义主题中正确添加或修改space变量？

你在自定义Chakra UI主题时遇到了space变量修改无效的问题——其他主题配置（如colors、fonts）都正常生效，但space的修改完全被忽略。你尝试了两种错误的嵌套写法：

第一种错误写法：

const myNewTheme = {
  // ...其他配置
  space: {
    spacing: {
      96: '28rem',
      112: '32rem'
    },
  },
}

第二种错误写法：

const myNewTheme = {
  // ...其他配置
  spacing: {
    space: {
      96: '28rem',
      112:'32rem'
    },
  },
}

问题原因与解决方案 #

问题出在嵌套结构错误——Chakra UI的主题规范中，space是直接作为顶级配置项，内部直接定义间距的键值对，不需要额外嵌套spacing或space层级。

修正后的正确配置如下：

const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: false,
}

const myNewTheme = {
  styles: {
    global: {
      body: {
        bg: 'bgLight',
      },
    },
  },
  colors,
  fonts: {
    body: 'Bitter, serif',
    heading: 'Poppins, sans-serif',
  },
  fontSizes: {
    vw1: 'calc(max(16vw, 2rem))',
  },
  // 正确写法：直接在space下定义间距值
  space: {
    96: '28rem',
    112: '32rem'
  },
  breakpoints,
  components: {
    Button,
    Heading,
  },
}

const fsiTheme = extendTheme(myNewTheme, { config })

export default fsiTheme

验证方法 #

修改完成后，你可以通过Chakra UI的间距属性（如mx="96"、py="112"）来验证这些自定义间距是否生效。Chakra会自动将这些键映射到对应的间距值，同时原有的默认spacing值也会被保留，仅新增/覆盖你定义的键。

内容的提问来源于stack exchange，提问作者Friedrich Siever