Comment utiliser useStyle pour styliser le composant de classe dans Material Ui

Question

Je souhaite utiliser useStyle pour styliser le composant de classe . Mais cela peut être facilement fait des crochets. mais je veux utiliser Component à la place. Mais je n'arrive pas à comprendre comment faire cela.

 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

Vous pouvez le faire comme ceci :

 import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  root: {
    backgroundColor: "red"
  }
});

class ClassComponent extends Component {
  state = {
    searchNodes: ""
  };

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>Hello!</div>
    );
  }
}

export default withStyles(styles, { withTheme: true })(ClassComponent);

Ignorez simplement les withTheme: true si vous n'utilisez pas de thème.

---

Pour que cela fonctionne dans TypeScript, quelques modifications sont nécessaires :

 import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";

const styles = theme => createStyles({
  root: {
    backgroundColor: "red"
  }
});

interface Props extends WithStyles<typeof styles>{ }

class ClassComponent extends Component<Props> {

// the rest of the code stays the same

Answer 2

pour les composants de classe, vous pouvez utiliser withStyles au lieu de makeStyles

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

const useStyles = theme => ({
fab: {
  position: 'fixed',
  bottom: theme.spacing(2),
  right: theme.spacing(2),
},
  });

class ClassComponent extends Component {
   render() {
            const { classes } = this.props;

            {/** your UI components... */}
      }
} 


export default withStyles(useStyles)(ClassComponent)

Answer 3

Salut j'ai eu un problème similaire. Je l'ai résolu en remplaçant makeStyles par withStyles puis au point où faire quelque chose comme const classes = useStyle(); , remplacez cela par const classes = useStyle;

Vous remarquez que useStyle n'est pas censé être un appel de fonction mais plutôt une affectation de variable.

Cela devrait fonctionner correctement après avoir effectué ces modifications.