How can i use Make Styles in MUI version 5.2.2

Question

I have been using mui v5.0.2 and then today I upgraded to the latest version which is v5.2.2 and then I started getting this type error on makeStyles breakpoints. Below is the error I am getting and I am getting it everywhere I am using the breakpoints.

Note that I was not getting this error when I was using version 5.0.2

Below is my code

import { Container, Grid, Button } from '@mui/material';
import { makeStyles, createStyles } from '@mui/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { Theme } from '@mui/system'

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    gridContainer: {
      height: '100vh',
      [theme.breakpoints.up('sm')]: {
        flexDirection: 'row-reverse!important'
      }
    },
    illustrationGrid: {
      display: 'flex',
      justifyContent: 'center'
    },
    buttonGrid: {
      height: '100%',
      justifyContent: 'center'
    },
    buttonContainer: {
      display: 'flex',
      '& button': {
        width: '100%',
        [theme.breakpoints.up('sm')]: {
          //   padding: '0.65rem 5.313rem'
        },
        marginTop: '1rem'
      },
      alignItems: 'center',
      justifyContent: 'center'
    },
    image: {
      width: '100%',
      [theme.breakpoints.only('sm')]: {
        maxHeight: '400px'
      }
    }
  })
);

How can i use Make Styles in MUI version 5.2.2

0 Answers