React组件覆盖html/body设置的background背景图案问题（使用Chakra UI）

问题原因 #

Chakra UI 内置的全局默认样式会给 ChakraProvider 渲染的根容器、body 元素默认设置纯白色背景，直接覆盖了你在 html、body 上自定义的背景图案。

可行解决方案 #

方案1：全局配置Chakra主题（推荐）

自定义Chakra全局样式，把根容器和body的背景设为透明即可，修改你项目中引入ChakraProvider的文件：

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

const customTheme = extendTheme({
  styles: {
    global: {
      body: {
        background: 'transparent'
      },
      // 替换为你项目的根节点选择器，通常是 #root 或者 #app
      '#root': {
        background: 'transparent',
        minHeight: '100vh'
      }
    }
  }
})

// 挂载时把自定义主题传入ChakraProvider
<ChakraProvider theme={customTheme}>
  {/* 你的应用组件 */}
</ChakraProvider>

方案2：直接给业务代码外层容器设置透明背景

如果不想修改全局配置，直接给你写的最外层div添加Chakra的背景透明属性，同时撑满视口高度：

<div bg="transparent" minH="100vh">
  <Flex direction="row" justifyContent="center">
    <Text mt="100px">该文本应当显示在背景图案上层...</Text>
  </Flex>
</div>

额外注意 #

你当前写的背景样式里 background-size: 120px, cover; 多了不必要的逗号，会导致样式解析异常，建议修改为 background-size: 120px; 或者指定宽高的 background-size: 120px 120px;。

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