Material UI全局背景色修改失败求助：如何将默认白色改为其他颜色

你之前修改的是MuiDivider（分割线组件）的背景样式，这只会影响分割线元素，和全局背景完全无关，所以看不到效果。要修改全局默认背景色，有两种标准方法：

方法一：通过主题配置修改（推荐） #

这是Material UI官方推荐的方式，直接在主题中定义全局背景色，配合CssBaseline组件生效：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// 创建自定义主题
const theme = createTheme({
  palette: {
    background: {
      default: '#cc5a5a', // 设置全局默认背景色
      paper: '#cc5a5a' // 可选：修改卡片、弹窗等"纸张"类组件的背景色
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline /> {/* 必须引入，它会将主题样式应用到全局body */}
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

export default App;

方法二：直接覆盖全局body样式 #

如果不想改动主题配置，也可以用GlobalStyles组件直接设置body的背景：

import { GlobalStyles } from '@mui/material';

function App() {
  return (
    <>
      <GlobalStyles styles={{ body: { backgroundColor: '#cc5a5a', margin: 0 } }} />
      {/* 你的应用内容 */}
    </>
  );
}

关键说明 #

• CssBaseline会重置全局样式并应用主题中的background.default到body，是主题方式生效的核心。
• 你之前的代码仅针对分割线组件，所以无法改变全局背景。

内容的提问来源于stack exchange，提问作者Екатерина