javascript - 是否有适用于类Components的React Material-UI makeStyles()函数的非摘机替代品

我在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功能的语法是什么。

最佳答案

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

import { withStyles } from '@material-ui/styles'

const Component = withStyles(styles)(({classes}) =>{
    return <div className={classes.foo} /<
})

class Component extends React.Component{
    render(){
        const { classes } = this.props
        return <div className={classes.foo} />
    }
}
export default withStyles(styles)(Component)

关于javascript - 是否有适用于类Components的React Material-UI makeStyles()函数的非摘机替代品，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58441802/