Как использовать useStyle для стилизации компонента класса в пользовательском интерфейсе материала

Question

Я хочу использовать useStyle для стилизации компонента класса. Но это можно легко сделать крючками. но я хочу использовать компонент вместо этого. Но я не могу понять, как это сделать.

import React,{Component} from 'react';
import Avatar from '@material-ui/core/Avatar';
import { makeStyles } from '@material-ui/core/styles';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';


    const useStyles = makeStyles(theme => ({
      '@global': {
        body: {
          backgroundColor: theme.palette.common.white,
        },
      },
      paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      },
      avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main,
      }
}));

class SignIn extends Component{
  const classes = useStyle(); // how to assign UseStyle
  render(){
     return(
    <div className={classes.paper}>
    <Avatar className={classes.avatar}>
      <LockOutlinedIcon />
    </Avatar>
    </div>
  }
}
export default SignIn;

Answer 1

useStyles является крючком реагирования.Вы можете использовать его только в компоненте функции.

Эта строка создает хук:

const useStyles = makeStyles(theme => ({ /* ... */ });

Вы используете его внутри компонента функции для создания объекта классов:

const classes = useStyles();

Затем в jsx вы используете классы:

<div className={classes.paper}>

Предлагаемые ресурсы: https://material -ui.com / styles / basics / https://reactjs.org/docs/hooks-intro.html