reactjs - Material-ui withTheme() 给出错误 "TypeError: Object(...) is not a function"

Question

编辑:我安装了 v1.0.0.36 beta 版本，并从该版本文档中复制了示例(对我来说看起来相同)，它立即起作用了。不确定问题是什么，但感谢您的回复

我正在尝试使用 Material-UI 的 withTheme 来访问组件中的主题。

我已按照 docs 中的示例进行操作它通过 create-react-app 打包程序正常，但在浏览器中给出错误: TypeError: Object(...) is not a function并突出显示代码行 > 17 |导出默认 withTheme()(WithTheme);

我已将示例代码缩减为 withTheme() 的最基本用法，但仍然收到此错误

withtheme.js

import React from 'react';
import { withTheme } from 'material-ui/styles';

function WithTheme() {
  
    const styles = {
        primaryText: {
            color: 'red',
        }
    };

    return (
        <h1 style={styles.primaryText}>Hello</h1>
    );
}

export default withTheme()(WithTheme);

编辑:为了帮助澄清问题，这里是 App.js 文件。

import React, { Component } from 'react';
import './App.css';
import 'typeface-roboto';

import AppBar from 'material-ui/AppBar';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {brown500, brown900} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

import WithTheme from './components/withtheme';

const Theme = getMuiTheme({
  palette: {
    primary1Color: brown900,
    primary2Color: brown500,
  }
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={Theme} >
          <AppBar
            title="Title"
            iconClassNameRight="muidocs-icon-navigation-expand-more" />
          <WithTheme />
      </MuiThemeProvider>
    );
  }
}

export default App;

我使用 muiThemeProvider 自定义了主题并将 primary1Color 更改为棕色。当我从 App.js 中删除 WithTheme 组件时，这一切都工作正常 - AppBar 按预期为棕色。问题是当我尝试使用 mui withTheme 函数时出现错误。

我的目的是将 WithTheme 组件中的 h2 设置为当前主题的 primary1Color

**结束编辑

如有任何帮助，我们将不胜感激。很高兴发布 doco 示例代码的(几乎)精确副本，如果需要，它会实现相同的错误。

谢谢

Answer 1

由于 MaterialUI 不再处于 Beta 阶段，因此规范发生了一些变化，使 Liam 的答案过时了。根据 Material-UIv3.1.2 docs

import { withTheme } from '@material-ui/core/styles';
export default withTheme()(WithTheme);