使用makeStyles的替代样式来样式化类组件 [英] Styling Class Components with an alternative to makeStyles
本文介绍了使用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屋!
查看全文