Question

我正在使用draft.js构建Material-UI文本编辑器，并将所有功能包装在Material-UI组件中。

我已经习惯了使用~3.9，但是为此项目决定更新为4.0。也许我在这里丢失了一些东西，但这通常对我没有问题

const styles = theme => ({
  paper: {
    paddingBottom: theme.spacing(2)
  },
  ...
})


import { withStyles } from "@material-ui/styles"
...
export class EditorComponent extends Component {
  ...
  render() {
    const { classes } = this.props
  }
}

export default withStyles(styles, { withTheme: true })(EditorComponent)

这在webpack-dev-server中运行时有效，但是当我构建为javascript并尝试将其导入另一个项目并使用它时，我在控制台中收到此错误...

Uncaught TypeError: theme.spacing is not a function

我似乎找不到与此问题相关的任何信息。

如果查看我的构建脚本有帮助的话，这里是仓库

https://github.com/jrdn91/material-ui-rte

Answer 1

结果表明，从withStyles中提取makeStyles或@material-ui/styles等不包括默认主题。 @material-ui/core/styles中包含这些文件的包装版本，这些版本确实包含默认主题。

因此，从import { withStyles } from "@material-ui/styles"更改为import { withStyles } from "@material-ui/core/styles"将解决此问题。

从此页面引用

https://material-ui.com/customization/default-theme/#material-ui-core-styles-vs-material-ui-styles

材质的UI组件“ theme.spacing”一旦构建便未定义

1 个答案: