使用makeStyles的替代样式来样式化类组件 [英] Styling Class Components with an alternative to makeStyles

问题描述

我看到了使用makeStyles挂钩的示例，以便您可以在Material Design中设置功能组件的样式.但是我使用的是类组件，因此不能使用钩子.我看到的用于功能组件的代码如下:

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),
    },
    }));

然后，为了对return()部分中的元素进行样式设置，它们会执行以下操作:

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?

推荐答案

对于类组件，可以使用 withStyles 包装器.

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:-

这篇关于使用makeStyles的替代样式来样式化类组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！