Material-ui: theme.spacing não é uma função com @ material-ui / [styles / core] 4.0.1

@keul Esteja ciente da diferença entre core e estilos: https://material-ui.com/customization/default-theme/#material -ui-core-styles-vs-material-ui-styles.

Obrigado @oliviertassinari.

Os estilos Material-UI são desenvolvidos pelo pacote @ material-ui / styles npm É uma solução de estilo para React. Esta solução é isolada, não tem conhecimento do tema material-UI padrão. Para remover a necessidade de injetar um tema no contexto do React sistematicamente, estamos envolvendo os módulos de estilo (makeStyles, withStyles e styled) com o tema Material-UI padrão

Para ser honesto, não entendi aqui, nem como isso se relaciona com a questão. Isso significa que não preciso do ThemeProvider porque já foi enviado ao importar de core/styles ?

Apenas para dar contexto adicional: meu código estava funcionando usando core 4.0.0 e styles 3.0.0-alpha.10
Comecei a ter problemas esta manhã, depois de migrar para 4.0.1

Posso voltar rapidamente para a versão antiga de bloqueio de pacote, mas gostaria de ter uma visão geral

@keul Tudo bem, talvez o seguinte seja mais claro. Você está injetando um novo tema que não é compatível com os componentes principais. Você deve usar createMuiTheme.

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

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

@oliviertassinari bem ... obrigado. Isso resolveu o problema.

Tenho quase certeza de que copiei este código bruto da documentação, é o mesmo caminho que encontro em https://material-ui.com/styles/advanced/. Como um novo usuário (a última vez que usei o MUI era a versão 0.x), isso não está muito claro, mas provavelmente terei de dar um tempo.

Desculpe pelo barulho!

Qualquer coisa em https://material-ui.com/styles/x não tem relação com o Material Design. É uma solução de estilo para React.

Ainda não consigo entender.
Podemos enviar theme como um argumento para estilos e envolvê-lo em withstyles ? Como o seguinte.

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

Podemos enviar o tema como um argumento para estilos e envolvê-lo com estilos? Como o seguinte.

@ByronHsu Sim, se você importar de @material-ui/core/styles ou se você injetar um tema criado com createMuiTheme() .

Mas ele retorna theme.spacing não é uma função.

@ByronHsu Você tem uma reprodução?

Desculpe, encontrei o problema.
Eu mudo import { withStyles } from '@material-ui/styles'; para import { withStyles } from '@material-ui/core/styles'; e tudo funciona bem.
Obrigado!

Também estou tendo esse problema e estou usando

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

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

Este componente está envolvido em um <ThemeProvider />

O mesmo problema ocorre se eu usar:

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

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

Eu recebo:

TypeError: theme.spacing is not a function

Todos os pacotes MUI estão atualizados, ramo mestre.

Esqueça, erro de novato. Esqueci de embrulhar meu novo tema em createMuiTheme - em vez disso, estava devolvendo um objeto básico.

o mesmo aqui

Vejo esse problema se faço tudo conforme o esperado, exceto código para um tema externo, quando não há um. Por exemplo:

rompe:

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

trabalho:

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

Vejo que há um aviso para esse caso. Parece que ainda deve funcionar, ou pelo menos deixar essa lógica para a função fornecida.

ir de
marginRight: theme.spacing(1)

mude para
marginRight: theme.spacing.unit

Este também é um problema para mim. Parece ser um erro de tipo, porque estou registrando o próprio valor e está funcionando, mas next.js lança um erro dizendo que ele não existe. Pontos de interrupção também.

Desculpe, encontrei o problema.
Eu mudo import { withStyles } from '@material-ui/styles'; para import { withStyles } from '@material-ui/core/styles'; e tudo funciona bem.
Obrigado!

Obrigado @ByronHsu

está funcionando