Material-ui: @ material-ui / [styles / core] 4.0.1不支持theme.spacing

@keul请注意核心和样式之间的区别： https : //material-ui.com/customization/default-theme/#material -ui-core-styles-vs-material-ui-styles。

谢谢@oliviertassinari。

Material-UI样式由@ material-ui / styles npm软件包提供支持。 这是React的样式解决方案。 该解决方案是孤立的，它不了解默认的Material-UI主题。 为了消除系统地在React上下文中注入主题的需要，我们使用默认的Material-UI主题包装了样式模块（makeStyles，withStyles和styled）

老实说，我在这里没有要点，也没有这与问题的关系。 这意味着比我不需要ThemeProvider，因为从core/styles导入时已经发货

只是为了提供其他上下文：我的代码正在使用core 4.0.0和styles 3.0.0-alpha.10
迁移到4.0.1后，今天早上我开始遇到问题

我可以快速返回到旧的包锁定版本，但我想了解大局

@keul好吧，也许下面的内容会更清楚。 您正在注入与核心组件不兼容的新主题。 您应该使用createMuiTheme。

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

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

@oliviertassinari很好...谢谢。 这解决了问题。

我很确定我是从文档中复制了此原始代码，这与我在https://material-ui.com/styles/advanced/上找到的方法相同

对不起，噪音！

https://material-ui.com/styles/x中的任何内容均与Material Design无关。 这是React的样式解决方案。

对不起，我还是听不懂。
我们可以发送theme作为样式的参数，并用withstyles包装吗？ 像下面这样。

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

我们可以将主题作为样式的参数发送，并用withstyles包装吗？ 像下面这样。

@ByronHsu是的，如果您是从@material-ui/core/styles导入的，或者注入了由createMuiTheme()创建的主题。

但是返回theme.spacing不是函数。

@ByronHsu您有复制品吗？

抱歉，我发现了问题。
我将import { withStyles } from '@material-ui/styles';更改import { withStyles } from '@material-ui/core/styles'; ，一切正常。
谢谢！

我也有这个问题，我正在使用

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

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

此组件包装在<ThemeProvider />

如果我改为使用，则会发生相同的问题：

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

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

我得到：

TypeError: theme.spacing is not a function

所有MUI软件包都是最新的master分支。

没关系，菜鸟犯错。 我忘了将新主题包装在createMuiTheme -我返回的是基本对象。

同样在这里

如果我按预期进行所有操作，那么我会看到此问题，除了没有主题时，用于外部主题的代码除外。 例如：

休息时间：

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

作品：

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

我看到此情况有警告。 看起来它仍然应该可以工作，或者至少应该将该逻辑留给所提供的函数。

从...来
marginRight: theme.spacing(1)

更改为
marginRight: theme.spacing.unit

这对我来说也是一个问题。 这似乎是类型错误，因为我正在记录值本身并且它正在工作，但是next.js抛出错误说它不存在。 断点也是。

抱歉，我发现了问题。
我将import { withStyles } from '@material-ui/styles';更改import { withStyles } from '@material-ui/core/styles'; ，一切正常。
谢谢！

谢谢@ByronHsu

它的工作