Question

使用 MUI ThemeProvider 导致“未定义”错误

2022-04-19

741

javascript reactjs material-ui

我有一个使用 MUI 制作的小应用程序。它运行良好，直到我尝试添加 ThemeProvider 。一旦完成，应用程序就会中断，并且我正在使用的所有 MUI 组件都会开始抛出 undefined 。

我正在尝试使用 createTheme ，并确保从 "@mui/material/styles" 导入它，因为我知道有一个类似的包会给其他人带来问题。

这是我的代码：

const light = {
  palette: {
    type: "light",
  },
};

const dark = {
  palette: {
    type: "dark",
  },
};

function App() {
  const [isDarkTheme, setIsDarkTheme] = useState(false);

  return (
    <ThemeProvider theme={isDarkTheme ? createTheme(dark) : createTheme(light)}>
    // things
    </ThemeProvider>
  )
}

然后在我的控制台中我收到错误，例如 Uncaught TypeError: Cannot read properties of undefined (reading 'paper')

有什么想法我在这里出错了吗？

Answer 1

不知道您是否还需要它。我添加了一个按钮，但您可以使用上下文或您正在使用的任何内容。

    import * as React from "react";
    import ReactDOM from "react-dom";
    import {
      Button,
      ThemeProvider,
      createTheme,
      Paper
    } from "@mui/material";
    const light = {
      palette: {
        mode: "light",
      },
    };

    const dark = {
      palette: {
        mode: "dark",
      },
    };

    export default function App() {
      const [isDarkTheme, setIsDarkTheme] = React.useState(true);

      return (
        <ThemeProvider theme={isDarkTheme ? createTheme(dark) : createTheme(light)}>
          <Paper>
            <Button
              onClick={() => {
                setIsDarkTheme(!isDarkTheme);
              }}
            >
              mode
            </Button>
          </Paper>
        </ThemeProvider>
      );
    }

这是你的问题

    const dark = {
      palette: {
        //type: "dark" <---
        mode: "dark",
      },
    };

顺便说一句，这就是我的做法。

      export default function App() {
      const [isDarkTheme, setIsDarkTheme] = React.useState(true);

      const theme = createTheme({
        palette: {
          mode: isDarkTheme ? "light" : "dark"
        }
      });

      return (
        <ThemeProvider theme={theme}>
          <Paper>
            <Button
              onClick={() => {
                setIsDarkTheme(!isDarkTheme);
              }}
            >
              mode
            </Button>
          </Paper>
        </ThemeProvider>
      );
    }