mui主题颜色不适用[重复]答案

【问题标题】：mui Theme color not applying [duplicate]mui主题颜色不适用[重复]
【发布时间】：2021-11-11 11:10:01
【问题描述】：

我使用makeStyles()创建了一个名为和应用样式的基本组件

// Welcome.js

import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme) => {
  return {
    root: {
      width: "100%",
      maxWidth: 360,
      background: theme.palette.background.default,
    },
  };
});
export default function Welcome() {
  const classes = useStyles();
  return <div className={classes.root}>Hello world</div>;
}

// App.js

import Welcome from "./components/Welcome";

function App() {
  return <Welcome />;
}

export default App;

我收到类似的错误
TypeError：无法读取未定义的属性（读取“背景”）（匿名函数）
C:/projects/mui-demo/src/components/Welcome.js:9

怎么了？

我正在使用 mui v5。

【问题讨论】：

背景不是 theme.palette 对象中的道具。检查调色板颜色 - mui.com/customization/palette/#palette-colors
@madhuri 使用背景：theme.palette.primary.light，并出现错误类型错误：也无法读取未定义的属性（正在读取“主”），我在“调色板”属性下看到“背景”属性在默认主题对象mui.com/customization/default-theme/#explore
哦.. 明白了，谢谢指出。

标签： reactjs material-ui

【解决方案1】：

我可以通过在 app.js 文件中创建主题来解决此问题。

// app.js

import Welcome from "./components/Welcome";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Welcome/>
    </ThemeProvider>
  );
}

export default App;

//welcome.js

import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    background: theme.palette.background.default
  },
}));
export default function Welcome() {
  const classes = useStyles();
  return <div className={classes.root}>Hello world</div>;
}

【讨论】：