How to use useStyle to style Class Component in Material Ui

You can do it like this:

import { withStyles } from "@material-ui/core/styles";const styles = theme => ({  root: {    backgroundColor: "red"  }});class ClassComponent extends Component {  state = {    searchNodes: ""  };  render() {    const { classes } = this.props;    return (      <div className={classes.root}>Hello!</div>    );  }}export default withStyles(styles, { withTheme: true })(ClassComponent);

Just ignore the withTheme: true if you aren't using a theme.

To get this working in TypeScript, a few changes are needed:

import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";const styles = theme => createStyles({  root: {    backgroundColor: "red"  }});interface Props extends WithStyles<typeof styles>{ }class ClassComponent extends Component<Props> {// the rest of the code stays the same

for class Components you can use withStyles instead of makeStyles

import { withStyles } from '@material-ui/core/styles';const useStyles = theme => ({fab: {  position: 'fixed',  bottom: theme.spacing(2),  right: theme.spacing(2),},  });class ClassComponent extends Component {   render() {            const { classes } = this.props;            {/** your UI components... */}      }} export default withStyles(useStyles)(ClassComponent)

Hey I had a similar problem. I solved it by replacing makeStyles with withStyles and then at the point where do something like const classes = useStyle();, replace that with const classes = useStyle;

You notice useStyle is not supposed to be a function call but rather a variable assignment.

That should work fine after you've made those changes.