提问人：Luke 提问时间：10/18/2019 最后编辑：Luke 更新时间：2/12/2021 访问量：2092
React Material-UI makeStyles（） 函数是否有适用于类组件的非钩子替代方案
Is there a non-hook alternative for the React Material-UI makeStyles() function that works for class Components
问：
我在 material-UI 的 react 库中使用 makeStyles（） 函数，并收到以下错误
钩子只能在函数组件的主体内部调用。
下面是我正在使用的代码类型的示例。
const useStyles = makeStyles(theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
},
dense: {
marginTop: theme.spacing(2),
},
menu: {
width: 200,
},
}));
class Demo extends Component {
constructor(props) {
super(props);
}
render() {
const classes = useStyles();
return (
<TextField
className={classes.textField}
>
<MenuItem>Demo</MenuItem>
</TextField>
)
}
}我知道抛出错误是因为我尝试在我的类组件中使用 makeStyles（）（如上所示）。
但是，我很好奇 Material-UI 的 react 库中是否有 makeStyles（） 的替代方法，或者在类组件中获取 make-styles 功能的语法是什么。
答：
2赞
Dupocas
10/18/2019
#1
makeStyles只是一个（返回一个钩子）来应用功能组件中的样式。您始终可以使用 ，它用于完全相同的目的，并且适用于两个类的功能组件high order functionwithStylesHOC
import { withStyles } from '@material-ui/styles'
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
}
};
class Component extends React.Component{
render(){
const { classes } = this.props
return <div className={classes.foo} />
}
}
export default withStyles(styles)(Component)
评论
0赞
SacWebDeveloper
7/28/2020
谢天谢地！钩子太可怕了！
0赞
asds_asds
10/10/2020
你为什么这么认为@SacWebDeveloper？
0赞
SacWebDeveloper
10/10/2020
钩子生命周期模式不像组件生命周期（componentDidMount、componentDidUpdate 等）那样明确，魔术钩子使代码更难读/写，通常更难遵循逻辑，你还必须学习一堆奇怪的非标准函数（useCallback、useEffect 等）。想要比较以前的道具或状态，很容易使用类，使用钩子，您必须使用一些 ref hack。转向钩子假设每个人都喜欢函数式编程而不是面向对象。OOP 使用更广泛，来自 Android、iOS、C++、Java 等的开发人员可以更理解类。
2赞
SacWebDeveloper
10/10/2020
我试过钩子，我非常讨厌它们。永远不会使用它们。无论如何，它们只是一种时尚。钩子是一个笑话，是朝着错误方向的严重失误，应该被弃用。就像 TypeScript 的崩溃一样，我们的团队浪费了无数时间来处理钩子的怪异问题和它的学习曲线。Facebook应该承认，他们把这个强加给开发人员是错误的，并在太多的代码库被进一步搞砸之前纠正他们的错误。
评论