是否有适用于类组件的 React Material-UI makeStyles() 函数的非挂钩替代方案

Posted 2023-02-21

【中文标题】是否有适用于类组件的 React Material-UI makeStyles() 函数的非挂钩替代方案

【英文标题】：Is there a non-hook alternative for the React Material-UI makeStyles() function that works for class Components

【发布时间】：2020-02-14 21:59:58

【问题描述】：

我在 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 的反应库中的类组件是否有 makeStyles() 的替代方法，或者在类组件中获取 make-styles 功能的语法是什么。

【参考方案1】：

makeStyles 只是一个 high order function（返回一个钩子），用于在功能组件中应用样式。您始终可以使用withStyles，这是一个HOC，用于完全相同的目的，并且适用于两个类和功能组件

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)

【讨论】：

感谢上帝！钩子太可怕了！

你为什么这么认为@SacWebDeveloper？

Hook 生命周期模式不像组件生命周期（componentDidMount、componentDidUpdate 等）那样明确，魔术钩子使代码读/写更难看，通常更难遵循逻辑，你还必须学习一堆奇怪的非标准函数（useCallback、useEffect 等）。想要比较以前的道具或状态，使用类很容易，使用钩子你必须使用一些 ref hack。转向钩子假设每个人都喜欢函数式编程而不是面向对象。 OOP 使用更广泛，来自 android、ios、C++、Java 等的开发人员可以更了解类。

我试过钩子，我非常讨厌它们。永远不会使用它们。无论如何，它们只是一种时尚。 Hooks 是一个笑话，是在错误方向上的严重失误，应该被弃用。就像 TypeScript 的失败一样，我们的团队已经浪费了无数时间来处理奇怪的钩子和它的学习曲线。 Facebook 应该承认，他们在将这一点强加给开发人员时被误导了，并在太多的代码库变得更加混乱之前纠正了他们的错误。