3

I created a header menu. It still worked in Material-UI V4. But I recently updated to Material-UI V5. But I have a error like this: TypeError: Cannot read properties of undefined (reading 'down')

import makeStyles from "@mui/styles/makeStyles";
import { Theme } from "@mui/system";

// NOTE: Styling header bar components

const useStyles = makeStyles((theme: Theme) => ({
    title: {
        flexGrow: 1,
    },
    linkStyle: {
        textDecoration: "none",
        color: "white",
        marginLeft: 5,
    },
    desktopMenuStyle: {
        display: "display",

        [theme.breakpoints.down("mobile")]: {
            display: "none",
        },
    },
    mobileMenuStyle: {
        display: "none",

        "& .MuiList-root": {
            marginTop: 40,
        },
        [theme.breakpoints.down("laptop")]: {
            display: "block",
        },
    },
}));

I have a error like this

Hein Ko Zin
  • 31
  • 1
  • 3

6 Answers6

5

write this code to the file include your component.

1.Import:

import { ThemeProvider } from "@mui/styles";

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme();
theme = responsiveFontSizes(theme);

<ThemeProvider theme={theme}>
  <your component/>
</ThemeProvider>
Kuro-ducnhat Hoang
  • 51
  • 2
0

For example write:

mobileMenuStyle: {
    display: "none",
    "& .MuiList-root": {
        marginTop: 40,
    }
},
"@media (max-width: 1440px)": {
    mobileMenuStyle: {
      display: "block"
     }
}

Instead of:

mobileMenuStyle: {
    display: "none",

    "& .MuiList-root": {
        marginTop: 40,
    },
    [theme.breakpoints.down("laptop")]: {
        display: "block",
    },
},
morningStar
  • 1
  • 1
0

encapsulate the datatable component with a theme provider

import { ThemeProvider } from "@mui/styles";
import { createTheme, responsiveFontSizes } from '@mui/material/styles';

then

let theme = createTheme();
theme = responsiveFontSizes(theme);

then

<ThemeProvider theme={theme}>
 < name of your data table compobebt >
</ThemeProvider>
Mohammed AL MahmoOd
  • 91
  • 1
  • 8
0

Note that if you are directly importing/using a component and that component attempts to access data from the theme, you will get this error (or similar, depending what attributes you try to access within the theme).

The "theme" data from the ThemeProvider is not passed in to imported components (or components used directly in JSX), it is only passed into the styling of components or elements (via eg Styled Components or Emotion).

In other words, <MyComponent /> will not receive any data from the theme, but styled(MyComponent)``; will receive the theme data.

This hung me up for a while so I hope it may help anyone else who stumbles upon it.

karfus
  • 869
  • 1
  • 13
  • 20
0
  1. import {makeStyles} from '@mui/styles';
  2. import {Theme} from '@material-ui/core';
declare module '@material-ui/core' {
    interface DefaultTheme extends Theme{}
}

const useStyles = makeStyles( (theme : any) => ({

    yourcomponent : {
        [theme.breakpoints.down('sm')] : {
         ///put your styles here 
        },

}));
F. Müller
  • 3,969
  • 8
  • 38
  • 49
sufian shaik
  • 1
  • 1
0
import { makeStyles } from "@material-ui/core/styles";

// import makeStyles from core

Rohit Gupta
  • 4,022
  • 20
  • 31
  • 41
ShrutiLatthe
  • 21
  • 1