Material-ui: theme.spacing n'est pas une fonction avec @ material-ui / [styles / core] 4.0.1

@keul Soyez conscient de la différence entre le noyau et les styles: https://material-ui.com/customization/default-theme/#material -ui-core-styles-vs-material-ui-styles.

Merci @oliviertassinari.

Les styles Material-UI sont alimentés par le package @ material-ui / styles npm. C'est une solution de style pour React. Cette solution est isolée, elle n'a aucune connaissance du thème Material-UI par défaut. Pour supprimer le besoin d'injecter systématiquement un thème dans le contexte de React, nous enveloppons les modules de style (makeStyles, withStyles et styled) avec le thème Material-UI par défaut

Pour être honnête, je ne comprends pas le point ici, ni comment cela est lié au problème. Cela signifie que je n'ai pas besoin du ThemeProvider car déjà livré lors de l'importation depuis core/styles ?

Juste pour donner un contexte supplémentaire: mon code fonctionnait en utilisant core 4.0.0 et styles 3.0.0-alpha.10
J'ai commencé à avoir des problèmes ce matin, après avoir migré vers la version 4.0.1

Je peux rapidement revenir à l'ancienne version de package-lock, mais j'aimerais avoir une vue d'ensemble

@keul D'accord , peut-être que ce qui suit sera plus clair. Vous injectez un nouveau thème qui n'est pas compatible avec les composants principaux. Vous devez utiliser createMuiTheme.

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

const theme = createMuiTheme({
  spacing: 4,
  palette: {
    primary: {
      main: "#007bff",
    },
  }
});

@oliviertassinari bien ... merci. Cela a résolu le problème.

Je suis à peu près sûr que j'ai copié ce code brut de la documentation, c'est le même chemin que je trouve sur https://material-ui.com/styles/advanced/. En tant que nouvel utilisateur (la dernière fois que j'ai utilisé MUI, c'était la version 0.x) ce n'est pas vraiment clair mais je dois probablement lui donner un peu de temps.

Désolé pour le bruit!

Tout ce qui se trouve sur https://material-ui.com/styles/x n'est pas lié à la conception matérielle. C'est une solution de style pour React.

Désolé, je ne comprends toujours pas.
Pouvons-nous envoyer theme comme argument aux styles et l'envelopper par withstyles ? Comme le suivant.

const styles = theme => {({
    root: {
      // JSS uses px as the default units for this CSS property.
      padding: theme.spacing(2), // = 8 * 2
    },
})};

Pouvons-nous envoyer un thème comme argument aux styles et l'envelopper par des styles? Comme le suivant.

@ByronHsu Oui, si vous importez depuis @material-ui/core/styles ou si vous injectez un thème créé avec createMuiTheme() .

Mais il retourne theme.spacing n'est pas une fonction.

@ByronHsu Avez-vous une reproduction?

Désolé, j'ai trouvé le problème.
Je change import { withStyles } from '@material-ui/styles'; en import { withStyles } from '@material-ui/core/styles'; et tout fonctionne bien.
Merci!

J'ai aussi ce problème et j'utilise

import { makeStyles, Theme } from "@material-ui/core/styles";

const useStyles = makeStyles((theme: Theme) => ({
  icon: {
    marginRight: theme.spacing(1)
  }
}));

Ce composant est enveloppé dans un <ThemeProvider />

Le même problème se produit si j'utilise à la place:

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

const useStyles = makeStyles((theme: Theme) => ({
  icon: {
    marginRight: theme.spacing(1)
  }
}));

Je reçois:

TypeError: theme.spacing is not a function

Tous les packages MUI sont à jour, branche principale.

Nevermind, erreur de recrue. J'ai oublié d'envelopper mon nouveau thème dans createMuiTheme - Je retournais un objet de base à la place.

pareil ici

Je vois ce problème si je fais tout comme prévu, sauf le code pour un thème externe quand il n'y en a pas. Par exemple:

pauses:

<MuiThemeProvider theme={outer => ({...outer, ...theme})}>...</MuiThemeProvider>

travaux:

<MuiThemeProvider>
  <MuiThemeProvider theme={outer => ({...outer, ...theme})}>...</MuiThemeProvider>
</MuiThemeProvider>

Je vois qu'il y a un avertissement pour ce cas. Il semble que cela devrait toujours fonctionner, ou au moins laisser cette logique à la fonction fournie.

aller de
marginRight: theme.spacing(1)

changez-le en
marginRight: theme.spacing.unit

C'est aussi un problème pour moi. Cela semble être une erreur de type, car je consigne la valeur elle-même et cela fonctionne, mais next.js renvoie une erreur indiquant qu'elle n'existe pas. Les points d'arrêt aussi.

Désolé, j'ai trouvé le problème.
Je change import { withStyles } from '@material-ui/styles'; en import { withStyles } from '@material-ui/core/styles'; et tout fonctionne bien.
Merci!

Merci @ByronHsu

ça marche