Material UI v5: TypeError: Cannot read properties of undefined (reading 'create')

Question

After I created ThemeSetting.tsx context I cannot use <Button><Button> and all things that use theme of Material UI React.js, TypeScript:

error

TypeError: Cannot read properties of undefined (reading '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({

and 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>;
};

You should be importing createTheme and ThemeProvider from @mui/material/styles. The version in @mui/system is a lower-level piece that does not do anything specific to the default Material Design theme in @mui/material. — Ryan Cogswell
– Ryan Cogswell, Commented Sep 26, 2021 at 18:36

mrdecemberist · Accepted Answer · 2021-09-27 15:15:09Z

84

Just ran into this myself. You can import createTheme from @mui/material/styles or @mui/system, but they do 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).

The one from @mui/material/styles is smart enough to fill in gaps in the active theme from the default MUI theme. So if you're using @mui/material, then use @mui/material/styles.

answered Sep 27, 2021 at 15:15

mrdecemberist

2,9312 gold badges24 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hadar Over a year ago

I used: import { createTheme } from '@mui/system'; and when I add to my code inner ThemeProvider my component of <TexeField select /> crashed when click to open the options. The following import: import { createTheme } from '@mui/material/styles'; fixied that missing gaps properties in my theme. I would never have thought in that direction that this would be the problem,

Collectives™ on Stack Overflow

Material UI v5: TypeError: Cannot read properties of undefined (reading 'create')

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related