Material-ui: theme.spacing no es una función con @ material-ui / [styles / core] 4.0.1

@keul Tenga en cuenta la diferencia entre el núcleo y los estilos: https://material-ui.com/customization/default-theme/#material -ui-core-styles-vs-material-ui-styles.

Gracias @oliviertassinari.

Los estilos de Material-UI funcionan con el paquete @ material-ui / styles npm. Es una solución de estilo para React. Esta solución está aislada, no tiene conocimiento del tema Material-UI predeterminado. Para eliminar la necesidad de inyectar un tema en el contexto de React de forma sistemática, estamos envolviendo los módulos de estilo (makeStyles, withStyles y styled) con el tema Material-UI predeterminado

Para ser honesto, no entiendo el punto aquí, ni cómo esto se relaciona con el problema. Esto significa que no necesito ThemeProvider porque ya se envió al importar desde core/styles ?

Solo para dar contexto adicional: mi código funcionaba usando core 4.0.0 y styles 3.0.0-alpha.10
Empecé a tener problemas esta mañana, después de migrar a 4.0.1

Puedo volver rápidamente a la versión anterior de bloqueo de paquetes, pero me gustaría tener una idea general

@keul Muy bien, tal vez lo siguiente sea más claro. Está inyectando un nuevo tema que no es compatible con los componentes principales. Deberías usar createMuiTheme.

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

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

@oliviertassinari bueno ... gracias. Esto solucionó el problema.

Estoy bastante seguro de que copié este código sin formato de la documentación, es el mismo camino a seguir que encuentro en https://material-ui.com/styles/advanced/. Como nuevo usuario (la última vez que usé MUI era la versión 0.x), esto no está muy claro, pero probablemente tenga que darle algo de tiempo.

¡Perdón por el ruido!

Cualquier cosa en https://material-ui.com/styles/x no tiene relación con Material Design. Es una solución de estilo para React.

Lo siento, todavía no puedo entender.
¿Podemos enviar theme como argumento a los estilos y envolverlo con withstyles ? Como el siguiente.

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

¿Podemos enviar un tema como argumento a los estilos y envolverlo con estilos? Como el siguiente.

@ByronHsu Sí, si importa desde @material-ui/core/styles o si inyecta un tema creado con createMuiTheme() .

Pero devuelve theme.spacing no es una función.

@ByronHsu ¿Tienes una reproducción?

Lo siento, encontré el problema.
Cambio import { withStyles } from '@material-ui/styles'; a import { withStyles } from '@material-ui/core/styles'; y todo funciona bien.
¡Gracias!

También tengo este problema y estoy usando

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

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

Este componente está envuelto en un <ThemeProvider />

El mismo problema ocurre si en su lugar uso:

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

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

Yo obtengo:

TypeError: theme.spacing is not a function

Todos los paquetes MUI están actualizados, rama maestra.

No importa, error de novato. Olvidé envolver mi nuevo tema en createMuiTheme ; en su lugar, estaba devolviendo un objeto básico.

igual que aquí

Veo este problema si hago todo como se esperaba, excepto el código para un tema externo cuando no hay uno. Por ejemplo:

descansos:

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

trabajos:

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

Veo que hay una advertencia para este caso. Sin embargo, parece que aún debería funcionar, o al menos dejar esa lógica a la función proporcionada.

ir desde
marginRight: theme.spacing(1)

cámbialo a
marginRight: theme.spacing.unit

Esto también es un problema para mí. Parece ser un error de tipo, porque estoy registrando el valor en sí y está funcionando, pero next.js arroja un error que dice que no existe. Puntos de interrupción también.

Lo siento, encontré el problema.
Cambio import { withStyles } from '@material-ui/styles'; a import { withStyles } from '@material-ui/core/styles'; y todo funciona bien.
¡Gracias!

Gracias @ByronHsu

esta funcionando