使用 MUI ThemeProvider 导致 "undefined" 错误

Question

我有一个使用 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>
      );
    }

使用 MUI ThemeProvider 导致 "undefined" 错误

Using MUI ThemeProvider causes "undefined" errors

javascript

reactjs

material-ui