Enhancing Class Components with a different approach to styling rather than using makeStyles

Question

Enhancing Class Components with a different approach to styling rather than using makeStyles

I have come across examples that demonstrate how to utilize the makeStyles hook in order to style functional components in Material Design. However, since I am working with a class component, I am unable to use hooks. The code snippet often used for functional components is shown below:

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

When it comes to styling elements within the return() section, they typically do something like this:

className={classes.margin}

How can I achieve similar functionality but for a class component?

reactjs material-ui

Answer 1

Answer №1

When working with class components, you can utilize the withStyles wrapper to apply styles.

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

class CustomComponent 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)(CustomComponent);

Check out a demo of this implementation here:-
https://codesandbox.io/s/smoosh-morning-tjh7y?fontsize=14&hidenavigation=1&theme=dark

Answer 2

When working with class components, you can utilize the withStyles wrapper to apply styles.

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

class CustomComponent 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)(CustomComponent);

Check out a demo of this implementation here:-
https://codesandbox.io/s/smoosh-morning-tjh7y?fontsize=14&hidenavigation=1&theme=dark

Enhancing Class Components with a different approach to styling rather than using makeStyles

Answer №1

Similar questions

Adjust the width of the MUI Drawer on the right side

Caution: An object with a "key" prop is being spread in JSX within Material UI Autocomplete

I can't seem to get React Fetch and the expressJS post method to cooperate - what could I be overlooking?

Building a dropdown feature for rows in a table using ReactJS

Troubleshooting NextJS useEffect with localStorage

The copying process of the React App Docker image seems to be dragging on for quite

Struggling to implement Yup Validation in MUI while using React Hook Form in a masked Controller field

Issue encountered while deploying Next.js application on vercel using the replaceAll function

I am having trouble scrolling through the main content when the side-drawer is open. How can I fix this issue?

What are the best practices for integrating breakpoints in MUI?

Adjust the stroke and fill colors of an SVG element when hovering over it

Cyrillic characters cannot be shown on vertices within Reagraph

MUI - The helper text for a Select using a TextField is appearing below the input field rather than within the input field itself

A step-by-step guide on processing payments via Stripe using a custom payment form designed with Material UI in a React application

Why doesn't setting the SVG viewBox to "0 0 100 100" scale my path to 100%?

Several conditional statements in JSX

How do I adjust the margin on MuiButton's endIcon in Material UI?

How to horizontally align Material-UI elements in ReactJS

Is it possible to nest slices within slices? What is the best way to distribute shared state logic among slices?

How to efficiently fetch Redux state through reducers with an action-based approach