Theme.spacing 不是函数

Posted 2023-02-22

【中文标题】Theme.spacing 不是函数

【英文标题】：Theme.spacing is not a function

【发布时间】：2019-11-16 18:02:43

【问题描述】：

我最近将我的 react 应用程序从 material-ui v3 迁移到 v4，并用“@material-ui/styles”替换了“@material-ui/core/styles”，为了测试我们使用了 jest 和酶。测试失败迁移后。如何解决此问题？错误如下：

警告：Material-UI：提供的 styles 参数无效。 您在上下文中提供了一个没有主题的功能。 父元素之一需要使用 ThemeProvider。 错误：未捕获 [TypeError：theme.spacing 不是函数] 全 DOM 渲染 › 遇到声明异常 TypeError: theme.spacing 不是函数

  17 |   ,
  18 |   selectEmpty: 
> 19 |     marginTop: theme.spacing(2),
     |                      ^
  20 |   ,

【问题讨论】：

github repo 上有一个关于这个确切问题的问题github.com/mui-org/material-ui/issues/15976 可能对你有用:)

我使用 createMuiTheme 仍然测试失败。

【参考方案1】：

Material UI 旧版本类似于 import makeStyles from '@material-ui/styles';

但他们已经更新了类似 import makeStyles from '@material-ui/core/styles' 的新版本

【讨论】：

但是如果你在 react 类下使用 '@material-ui/core/styles' 而不是 'import withStyles from '@material-ui/styles'' 会出现 'hook' 问题上下文。

@JourneyWoo 有什么问题？

这是正确答案。我只是做了错误的导入并得到了这个错误。确保从 '@material-ui/core/styles' 导入

不对，有一种情况你不想安装@material-ui/core就安装@material-ui/styles

【参考方案2】：

您必须使用 ThemeProvider 包装每个测试。这解决了这个问题。 示例：

    wrapper = mount(
      <ThemeProvider>
        <Dropdown handleSelect=handleSelectSpy options=options />
      </ThemeProvider>,
    );

【讨论】：

你不应该有。 MUI 总是有一个默认主题，所以除非您添加了默认主题中不存在的自定义属性，否则应该没问题。