Cannot read properties of undefined (reading 'up'), using MakeStyle

Question

I am trying to create custom style:

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


const theme = createTheme();
const widthStyle = makeStyles((theme) => ({
    wrapper: {
       position: 'relative',
       [theme.breakpoints.up('sm')]: {
            width: '95%'
       },
       [theme.breakpoints.up('md')]: {
            width: '75%'
       }
    }
}));

const Wrapper= () => {
    const classes = widthStyle(theme);
    return (  <div className={classes.wrapper}></div>);
}

However, i am getting error:

TypeError: Cannot read properties of undefined (reading 'up')

Why is this happening?

My dependenceis:

 "@mui/material": "^5.2.5",
    "@mui/styles": "^5.2.3",

lala lala · Accepted Answer · 2021-12-31T01:05:25

makeStyles & withStyle are consider legacy now according to MUI team. Now with MUI5 you can do it in much better way. styled-component already included in @mui/material/styles package.

You can do it in any ways or however one does it with normal styled-component. Please refer here to know more.

You can even customize MUI Component itself
or (new features), put styling on the unstyled MUI Component options provided by MUI team (reference)
by the way, you don't have to import createTheme in order to use the default theme options. Just make sure you import import { ThemeProvider } from '@mui/material/styles' and put in your main app.js file (reference).

import { styled } from '@mui/material/styles';

const Wrapper = styled('div')(({ theme }) => ({
  position: 'relative',
  [theme.breakpoints.up('sm')]: {
    width: '95%'
  },
  [theme.breakpoints.up('md')]: {
    width: '75%'
  },
  '.wrapper2': {
    backgroundColor: theme.palette.warning.main
  }
}));

const Wrapper= () => {
  return (  
    <Wrapper>
      Something here
      <div className="wrapper2">
        Something here too
      </div>
    </Wrapper>
  );
}

Cannot read properties of undefined (reading 'up'), using MakeStyle

1 Answers