Pourquoi Material-UI ne reconnaît pas la fonction theme.spacing?

Question

La description

J'essaie d'utiliser la fonction theme.spacing de Material-UI dans une application React mais la fonction spacing n'est pas reconnue.

Le message d'erreur Javascript est: TypeError: theme.spacing n'est pas une fonction

Je ne sais pas s'il s'agit d'un bogue ou si j'ai un problème avec les versions des frameworks installées.

---

Le contexte

• Voici le problème Github soulevé pour résoudre ce problème.
• Voici le repo avec le code incriminé. L'erreur est détectée dans le fichier src\pages\index.js , ligne 16: paddingTop: theme.spacing(20)
• Voici le dépôt en sandbox en cours d'exécution où vous pouvez réellement voir le message d'erreur.

Ce sont les versions des frameworks en cours d'installation, selon le fichier package-lock.json:

• Material-UI: v3.9.2
• Réagissez: v16.8.1
• Chrome: v72.0.3626.96
• TypeScript: aucun
• create-react-app: v3.2.2

Answer 1

Essaye ça.

import { makeStyles } from '@material-ui/core/styles' 
const userStyles = makeStyles (theme => ({
gridAlign : {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.secondary,
  },
})

Answer 2

Essayez de mettre à niveau le package @ material-ui/core vers la version minimale de 4.0.0.
Exécuter npm i @ material-ui/core @ 4.0.
Cela a résolu mon problème.

Answer 3

faites-le simplement de la façon suivante:

const theme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}>
      <CustomCheckbox />
    </ThemeProvider>
  );
}