MaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')

Question

创建 ThemeSetting.tsx 上下文后我无法使用 <Button><Button> 以及所有使用 theme 的 materialUI 的东西 ReactJS , 打字稿

error

TypeError: 无法读取未定义的属性（读取 'create'）push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState node_modules/@mui/material/Button/Button.js:67

  64 | minWidth: 64,
  65 | padding: '6px 16px',
  66 | borderRadius: theme.shape.borderRadius,
> 67 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
     | ^  68 |   duration: theme.transitions.duration.short
  69 | }),
  70 | '&:hover': _extends({

和ThemeSetting.tsx

import { createTheme, ThemeProvider } from "@mui/system";

export const ThemeContextProvider: React.FC<{}> = ({ children }) => {
    const theme = createTheme({
        palette: {
            navbar: blue[100],
            tag: {
                red: red[200],
                pink: pink[200],
                purple: purple[200],
                blue: blue[200],
                green: green[200],
            },
        },
        typography: {
            fontFamily: [
                "NotoSans",
                "NotoSansThai",
                "Arial",
                "Roboto",
                "'Helvetica Neue'",
                "sans-serif",
            ].join(","),
        },
        shape: {
            borderRadius: 15,
        },
    });

    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

Answer 1

我自己就运行进入这个。您可以从 @mui/material/styles 或 @mui/system 导入 createTheme，但它们 slightly different things:

You can use the utility coming from the @mui/system package, or if you are using @mui/material, you can import it from @mui/material/styles. The difference is in the default theme that is used (if no theme is available in the React context).

来自 @mui/material/styles 的那个足够聪明，可以填补活动主题与默认 MUI 主题之间的空白。因此，如果您使用 @mui/material，则使用 @mui/material/styles。

MaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')

MaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')

typescript

reactjs

material-design

material-ui