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.