reactjs - Styling Class Components with an alternative to makeStyles

Question

I am seeing examples of using the makeStyles hook so you can style your functional component in Material Design. But I am using a class component and so can't use hooks. The code I see being used for functional components is as follows:

    const useStyles = makeStyles((theme) => ({
    margin: {
    margin: theme.spacing(1),
    },
    }));

And then for styling the elements in the return() section, they do something like this:

className={classes.margin}

How do I do the same type of thing but for a class component?

question from:https://stackoverflow.com/questions/65920277/styling-class-components-with-an-alternative-to-makestyles

Answer 1

for class component you can use withStyles wrapper.

import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";

class App extends Component {
    render() {
        const { classes } = this.props;
        return <div className={classes.styledLine}>Styling using withStyles</div>;
    }
}

const useStyles = (theme) => ({
    styledLine: {
        color: "red"
    }
});

export default withStyles(useStyles)(App);

Working demo:-