[英]How do I access the theme object in Material UI when using React?
There was a recent upgrade in Material UI (@mui) and I'm having trouble accessing the theme object (see below code). Material UI (@mui) 最近进行了升级,我无法访问主题 object(请参见下面的代码)。 The below is incredibly easy code, but it's not working.下面是非常简单的代码,但它不起作用。 After 5 hours on this, I'm hoping someone can help me pinpoint the issue. 5个小时后,我希望有人能帮我查明问题。
The error I get is that React can't access "theme" so the property theme.palette.common.black can't be read.我得到的错误是 React 无法访问“主题”,因此无法读取属性 theme.palette.common.black。
import React from "react";
import { Typography } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { makeStyles, createStyles } from "@mui/styles";
const useStyles = makeStyles((theme) =>
createStyles({
monster: {
backgroundColor: theme.palette.common.black,
},
})
);
const theme = createTheme();
function Header(props) {
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<Typography variant="h1" className={classes.monster}>
Hi
</Typography>
</ThemeProvider>
);
}
export default Header;
The example in the documentation is this:文档中的示例是这样的:
import React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { makeStyles } from "@mui/styles";
const theme = createTheme();
const useStyles = makeStyles((theme) => ({
root: {
color: theme.palette.primary.main,
},
}));
const Header = (props) => {
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<div {...props} className={classes.root}>
Hello
</div>
</ThemeProvider>
);
};
export default Header;
But when I run this code, I get this error message:但是当我运行此代码时,我收到此错误消息:
TypeError: Cannot read properties of undefined (reading 'primary')
(anonymous function)
src/components/Header/Header.js:13
10 |
11 | const useStyles = makeStyles((theme) => ({
12 | root: {
> 13 | color: theme.palette.primary.main,
14 | },
15 | }));
16 |
You should defined type file that specify the theme in makeStyles
which has DefaultTheme interface extends from Theme interface.您应该在具有 DefaultTheme 接口的makeStyles
中定义指定主题的类型文件,该接口扩展自 Theme 接口。
For example is TS project you can:例如是 TS 项目,您可以:
import { Theme } from '@mui/material/styles';
declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.