Material-ui: @ material-ui / styles: utilisation dans un composant de classe?

Vous ne pouvez pas utiliser les hooks dans un composant de classe. Vous avez besoin d'un composant fonctionnel ou d'utiliser l'ordre supérieur ( withStyles ).

Je termine, si nous voyons un rapport similaire, je pense que nous devrions le documenter.

@oliviertassinari : Mais si l'application est déclarée en tant que classe, comment puis-je le faire?
Parce que dans l'application, j'ai un état et d'autres fonctions.

@ Angelk90 Vous devez utiliser l'API du composant d'ordre supérieur: https://github.com/mui-org/material-ui/issues/15820#issuecomment -495480040 ( withStyles ).

Selon votre documentation, l'exemple d'utilisation de l'api withStyles est toujours un composant de fonction.

https://material-ui.com/styles/basics/

C'est pourquoi j'ai voté contre votre réponse.

@oliviertassinari
Comment puis-je utiliser makeStyles avec HOC?
Selon mon cas d'utilisation, j'ai besoin de l'objet de thème matériel avec style.

Comme suggéré par @ ghosh-jaideep,
comment avoir la possibilité d'utiliser des utilitaires de thème tels que:

[theme.breakpoints.up("md")]: {
          paddingLeft: theme.spacing(2),
          paddingTop: theme.spacing(2)
}

à l'intérieur d'un composant de classe?
Merci

j'ai utilisé withStyles au lieu de makeStyle comme ça ...

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

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

class LoginComponent extends React?Component {
  render() {
    const { classes } = this.props;
    /** your UI components... */
  }
}

export default withStyles(syles)(LoginComponent);

@ Ess-Soft Comment LoginComponent est rendu à partir des composants parents?

• Avez-vous passé le thème comme accessoire?
• Avez-vous utilisé ThemeProvider dans le composant parent?

Ce sera plus utile si vous partagez un extrait de code du composant parent.

J'ai fait la même chose que @ Ess-Soft et j'ai ajouté widthTheme avant avecStyles
withTheme(withStyles(useStyles)(LoginComponent ))

alors vous pouvez utiliser theme même à l'intérieur du render

Quelqu'un peut-il expliquer la chose avec les styles. Je peux honnêtement dire que quand je vois des trucs comme ça, je pense que lol allez sur l'homme Angular est tellement plus normal. 3 heures aujourd'hui pour chercher et chercher des réponses, puis je trouve ça.

@ xtianus79 Cette API fonctionne également avec les composants de classe: https://material-ui.com/styles/basics/#higher -order-component-api.

@oliviertassinari pouvez-vous en montrer un exemple avec la grille? lol c'est ce que j'essaye de faire et je suis coincé là. J'utilise makeStyles et createStyles et je n'arrive pas à comprendre comment le faire sans fonction? Pouvez-vous aider avec ça.

@ xtianus79 Vous trouverez plus d'aide sur StackOverflow

@oliviertassinari pour ce problème particulier et ce cas d'utilisation, je ne le vois pas.

Ummm. encore même https://material-ui.com/styles/basics/#higher -order-component-api ne répond pas comment utiliser le «thème»? pourquoi ne prend en charge que les composants fonctionnels avec Hooks? les gens ont du code hérité ou ont besoin de composants basés sur des classes.

@DewangS Voir l'API withTheme() : https://material-ui.com/styles/api/#withtheme -component-component.