如何通过props修改Chakra UI theme.ts全局样式的页面body背景色

前置说明 #

你当前配置的全局样式是默认基础值，要实现页面级差异化背景，不需要修改原有theme.ts的默认配置，可选以下两种常用实现方式：

方案1：页面级使用<Global>组件覆盖（最推荐，轻量化） #

直接在需要自定义背景的页面组件内引入Chakra的Global组件，临时覆盖全局body样式，离开页面后自动失效，无需额外状态管理。
示例（pageB页面组件代码）：

import { Global } from '@emotion/react' // Chakra内置依赖，无需额外安装
import { Box } from '@chakra-ui/react'

const PageB = () => {
  return (
    <>
      <Global
        styles={{
          'html, body': {
            background: 'gray.100 !important', // 可替换为你需要的色值，支持Chakra内置颜色token
          }
        }}
      />
      {/* 页面其他内容 */}
      <Box>PageB 内容</Box>
    </>
  )
}

export default PageB

pageA不需要做任何修改，默认用全局配置的白色背景即可。

方案2：封装全局状态动态切换背景 #

如果有大量页面需要动态切换背景，可封装全局状态统一管理：

第一步：修改_app.tsx，添加状态控制 #

import { ChakraProvider, extendTheme } from '@chakra-ui/react'
import { theme as baseTheme } from './theme'
import { useRouter } from 'next/router' // 如果是Next.js项目直接用路由判断，其他框架同理

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  // 根据路由动态生成theme
  const dynamicTheme = extendTheme(baseTheme, {
    styles: {
      global: {
        'html, body': {
          background: router.pathname === '/page-b' ? 'gray.100' : 'white',
        }
      }
    }
  })

  return (
    <ChakraProvider theme={dynamicTheme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

这种方式适合规则固定、需要批量处理多页面背景的场景。

其他极简方案 #

如果不需要用到Chakra的颜色token，也可以直接在页面组件的useEffect里操作原生DOM：

import { useEffect } from 'react'

const PageB = () => {
  useEffect(() => {
    const originalBg = document.body.style.background
    document.body.style.background = '#f3f4f6'
    // 页面卸载时恢复默认背景
    return () => {
      document.body.style.background = originalBg
    }
  }, [])

  return <div>PageB内容</div>
}

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