无法更改主题 Material-UI 中的背景颜色

Question

我一直在尝试使用 Material UI 定义自定义主题并default为其定义背景颜色。pallete但当其他选项发挥作用时，这些变化并未生效。有人能告诉我我做错了什么吗？据我所知，这是改变颜色的方法。

这是我的代码

theme.ts

import { createTheme } from '@mui/material';
import {red} from '@mui/material/colors';
const theme = createTheme({
  palette: {
    background: {
      default: '#FFD600',
      paper: '#FFD600',
    },
  },
});

export default theme;

我的输入文件

import '../styles/globals.css';
import {ThemeProvider} from "@mui/material/styles"
import theme from '../theme'
function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

编辑：它似乎正在改变我与 Material-UI 一起使用的组件的背景，但不会改变我可能定义的其他组件。例如这里。我使用了MUI的卡片组件，背景被改变了，但我需要它来改变整个页面的背景颜色

编辑2：第一个组件有效，因为我定义了纸张颜色，但我仍然无法开始default工作

Answer 1

所以它仍然不起作用的原因是我们需要导入CssBaseline它才能工作。根据文档CssBaseline实现颜色。background.default

这是它的工作原理

import '../styles/globals.css';
import {ThemeProvider} from "@mui/material/styles"
import theme from '../theme'
import { CssBaseline } from '@mui/material/';

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

export default MyApp;

该属性的工作方式仍然很奇怪paper，但default您需要导入额外的依赖项