Material-ui: theme.spacing ist keine Funktion mit @ material-ui / [styles / core] 4.0.1

@keul Beachten Sie den Unterschied zwischen Kern und Stilen: https://material-ui.com/customization/default-theme/#material -ui-core-styles-vs-material-ui-styles.

Danke @oliviertassinari.

Material-UI-Stile werden vom Paket @ material-ui / styles npm unterstützt. Es ist eine Styling-Lösung für React. Diese Lösung ist isoliert und kennt das Standardthema der Material-Benutzeroberfläche nicht. Um zu vermeiden, dass ein Thema systematisch in den Kontext des React eingefügt werden muss, werden die Stilmodule (makeStyles, withStyles und styled) mit dem Standard-Material-UI-Thema umbrochen

Um ehrlich zu sein, verstehe ich hier weder den Punkt noch den Zusammenhang damit. Dies bedeutet, dass ich den ThemeProvider nicht benötige, da er bereits beim Importieren aus core/styles .

Nur um zusätzlichen Kontext zu geben: Mein Code funktionierte mit core 4.0.0 und styles 3.0.0-alpha.10
Nach der Migration auf 4.0.1 hatte ich heute Morgen Probleme

Ich kann schnell zur alten Package-Lock-Version zurückkehren, möchte aber einen Überblick erhalten

@keul Okay, vielleicht wird das Folgende klarer. Sie fügen ein neues Thema ein, das nicht mit den Kernkomponenten kompatibel ist. Sie sollten createMuiTheme verwenden.

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

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

@oliviertassinari gut ... danke. Dies hat das Problem behoben.

Ich bin mir ziemlich sicher, dass ich diesen Rohcode aus der Dokumentation kopiert habe. Es ist der gleiche Weg, den ich unter https://material-ui.com/styles/advanced/ finde

Entschuldigung für den Lärm!

Alles in https://material-ui.com/styles/x hat nichts mit Material Design zu tun. Es ist eine Styling-Lösung für React.

Entschuldigung, ich kann es immer noch nicht verstehen.
Können wir theme als Argument an Stile senden und es mit withstyles umschließen? Wie das folgende.

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

Können wir ein Thema als Argument an Stile senden und es mit Stilen umschließen? Wie das folgende.

@ByronHsu Ja, wenn Sie aus @material-ui/core/styles importieren oder wenn Sie ein mit createMuiTheme() erstelltes Thema einfügen .

Aber es gibt theme.spacing ist keine Funktion.

@ ByronHsu Hast du eine Reproduktion?

Entschuldigung, ich habe das Problem gefunden.
Ich ändere import { withStyles } from '@material-ui/styles'; in import { withStyles } from '@material-ui/core/styles'; und alles funktioniert gut.
Vielen Dank!

Ich habe auch dieses Problem und benutze

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

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

Diese Komponente ist in ein <ThemeProvider />

Das gleiche Problem tritt auf, wenn ich stattdessen Folgendes verwende:

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

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

Ich bekomme:

TypeError: theme.spacing is not a function

Alle MUI-Pakete sind auf dem neuesten Stand, Hauptzweig.

Vergiss nicht, Anfängerfehler. Ich habe vergessen, mein neues Thema in createMuiTheme zu verpacken - ich habe stattdessen ein Basisobjekt zurückgegeben.

hier gilt das gleiche

Ich sehe dieses Problem, wenn ich alles wie erwartet mache, außer Code für ein äußeres Thema, wenn es keines gibt. Zum Beispiel:

geht kaputt:

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

funktioniert:

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

Ich sehe, dass es für diesen Fall eine Warnung gibt. Es scheint jedoch, dass es immer noch funktionieren sollte oder zumindest diese Logik der bereitgestellten Funktion überlassen sollte.

gehen von
marginRight: theme.spacing(1)

ändere es auf
marginRight: theme.spacing.unit

Dies ist auch ein Problem für mich. Es scheint ein Typfehler zu sein, da ich den Wert selbst protokolliere und er funktioniert, aber next.js gibt einen Fehler aus, der besagt, dass er nicht existiert. Haltepunkte auch.

Entschuldigung, ich habe das Problem gefunden.
Ich ändere import { withStyles } from '@material-ui/styles'; in import { withStyles } from '@material-ui/core/styles'; und alles funktioniert gut.
Vielen Dank!

Vielen Dank, dass Sie @ByronHsu

es funktioniert