CODEWITHSUNDEEP
reactjsmaterial-ui
Jon
Jon

Reputation: 509

Styling Class Components with an alternative to makeStyles

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?

Upvotes: 0

Views: 1074

Answers (1)

Rajiv
Rajiv

Reputation: 3772

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:-
Edit smoosh-morning-tjh7y

Upvotes: 1

Related Questions