使用 React 时如何在 Material UI 中访问主题 object？

Question

Material UI (@mui) 最近进行了升级，我无法访问主题 object（请参见下面的代码）。 下面是非常简单的代码，但它不起作用。 5个小时后，我希望有人能帮我查明问题。

我得到的错误是 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;

文档中的示例是这样的：

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;

但是当我运行此代码时，我收到此错误消息：

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 | 

Answer 1

您应该在具有 DefaultTheme 接口的makeStyles中定义指定主题的类型文件，该接口扩展自 Theme 接口。

例如是 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 {}
}