How to use useStyle to style Class Component in Material Ui

Question

I want to use useStyle to style the Class Component . But this can be easily done hooks. but i want to use Component instead. But I cant figure out how to do this.

import React,{Component} from 'react'; import Avatar from '@material-ui/core/Avatar'; import { makeStyles } from '@material-ui/core/styles'; import LockOutlinedIcon from '@material-ui/icons/LockOutlined';       const useStyles = makeStyles(theme => ({       '@global': {         body: {           backgroundColor: theme.palette.common.white,         },       },       paper: {         marginTop: theme.spacing(8),         display: 'flex',         flexDirection: 'column',         alignItems: 'center',       },       avatar: {         margin: theme.spacing(1),         backgroundColor: theme.palette.secondary.main,       } }));  class SignIn extends Component{   const classes = useStyle(); // how to assign UseStyle   render(){      return(     <div className={classes.paper}>     <Avatar className={classes.avatar}>       <LockOutlinedIcon />     </Avatar>     </div>   } } export default SignIn; 

Answer 1

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