Существует ли альтернатива без перехвата для функции React Material-UI makeStyles (), которая работает для компонентов класса

Question

Я использую функцию 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 () в моем компоненте класса (как показано выше).

Однако мне любопытно, есть ли альтернатива makeStyles () для компонентов класса в библиотеке реагирования Material-UI, или какой синтаксис будет для получения функциональности make-стилей в компоненте класса.

Answer 1

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)