使用Chakra UI时自定义body背景色不生效，如何移除默认背景配置？

Chakra UI 的 ChakraProvider 默认会自动注入全局CSS重置样式，其中包含了body元素的默认背景色配置，且该样式的加载优先级高于你在globals.css中定义的样式，因此自定义的黑色背景会被覆盖。

以下方案按推荐优先级排序：

方案1：自定义Chakra主题（最推荐） #

通过自定义Chakra全局主题的方式配置背景色，符合Chakra的设计规范，不会影响其他默认功能。

1. 新建styles/theme.js文件，写入以下代码：

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

const theme = extendTheme({
  styles: {
    global: {
      body: {
        bg: 'black'
      }
    }
  }
})

export default theme

2. 修改app.js文件，引入自定义主题并传入ChakraProvider：

import { ChakraProvider } from '@chakra-ui/react'
import 'tailwindcss/tailwind.css'
import '../styles/globals.css'
import theme from '../styles/theme' // 引入自定义主题

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

方案2：禁用Chakra默认CSS重置 #

如果你不需要使用Chakra的默认全局重置样式，可以直接关闭该功能，自定义的全局样式就会正常生效。
修改app.js中ChakraProvider的配置，添加resetCSS={false}属性即可：

<ChakraProvider resetCSS={false}>
  <Component {...pageProps} />
</ChakraProvider>

方案3：提升自定义样式优先级 #

如果不想修改Chakra配置，可以直接在globals.css中提升自定义样式的权重：

body {
    background-color: black !important;
}

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