求助：使用CSS设置body背景色未生效，如何修改网页背景色？

你的问题是因为Chakra UI的ChakraProvider会默认注入全局样式，覆盖了你在App.css中设置的body样式。以下是几种可行的解决方法：

方法一：提升CSS选择器优先级 #

修改App.css，使用更具体的选择器来覆盖Chakra的默认样式：

#root body {
    background-color: darkslategray;
}

或者临时使用!important（不推荐长期使用，可能引发其他样式冲突）：

body {
    background-color: darkslategray !important;
}

方法二：通过Chakra主题配置全局样式（推荐） #

这是符合Chakra UI设计规范的方案，直接在主题中定义全局body样式：

import { Box, ChakraProvider, Image, extendTheme } from "@chakra-ui/react";
import React from "react";

const theme = extendTheme({
  styles: {
    global: {
      body: {
        bg: "darkslategray" // 也可以使用十六进制值，比如#2f4f4f
      }
    }
  }
});

function App() {
  return (
    <ChakraProvider theme={theme}>
        <Box>
          <Image
            src='https://data.whicdn.com/images/349387980/original.jpg'
            alt='Profile Image'
            boxSize={100}
            borderRadius='full'
            border='4px'
            borderColor='yellow'
          />
        </Box>
    </ChakraProvider>
  )
}

export default App;

方法三：给外层Box设置全屏背景 #

如果仅需要视觉上的页面背景效果，可以给最外层的Box组件设置全屏高度和背景色：

<ChakraProvider>
    <Box minH="100vh" bg="darkslategray">
      <Image
        src='https://data.whicdn.com/images/349387980/original.jpg'
        alt='Profile Image'
        boxSize={100}
        borderRadius='full'
        border='4px'
        borderColor='yellow'
      />
    </Box>
</ChakraProvider>

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