如何使用Chakra UI的extendTheme修改页面背景色？

你之前的两种写法都不符合Chakra UI的主题配置规范，所以没生效。以下是两种正确的实现方式：

方式一：直接在全局样式中设置背景色 #

通过styles.global配置全局元素的样式，这是修改全局背景色最直接的方法：

const theme = extendTheme({
  styles: {
    global: {
      body: {
        bg: "#e5ecff",
        // 可选：确保背景占满全屏可添加此属性
        minHeight: "100vh"
      }
    }
  }
});

方式二：自定义颜色变量后引用 #

如果想先在主题中定义颜色变量，再应用到全局样式，可以这么写：

const theme = extendTheme({
  colors: {
    customBg: "#e5ecff" // 自定义颜色变量
  },
  styles: {
    global: {
      body: {
        bg: "customBg" // 引用自定义颜色
      }
    }
  }
});

无效原因说明 #

• 第一种写法直接在主题顶层配置body，但Chakra UI的全局样式必须放在styles.global下才会被识别。
• 第二种写法仅在colors中新增了颜色变量，却没有将该变量绑定到全局元素的样式上，因此不会生效。

内容的提问来源于stack exchange，提问作者AKang123.