React js: Converting Material-UI functional code into class component throws typerror

Question

So i am using material ui login page code which is a functional component, so as per my requirement i need to convert it into class component. but converting it into class component throws error: "Cannot assign to read only property 'classes' of object '#'"

I have globally passed MiuiThemeProvider down into DOM tree in index.js file by wrapping app.js file inside it. I have carefully removed all hooks like replacing makeStyles with withStyles.

Now in code sandbox link shared below you can see my class component, which is showing error(Type Error: Cannot assign to read only property 'classes' of object '#')

The original material-UI functional component code is running fine but when converted to class component throws the mentioned error

codeSandbox link with all files and dependencies :https://codesandbox.io/s/magical-goodall-rzdg9?file=/src/App.js

Answer 1

You use withStyles two times. withStyles it is HOC, please check Doc

You need to remove withStyles from useStyles