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

1
  • V5 is a beta, so it can be a library error.
    – Ploppy
    Sep 18, 2021 at 17:51

5 Answers 5

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>
1
  • 1
    It worked. Can you explain what happened here. Nov 8, 2021 at 1:52
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",
    },
},
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>
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.

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 
    },

}));

New contributor
sufian shaik is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.