更新到 material-ui@0.15.0-beta.1 后我无法使用 material-ui 组件答案

【问题标题】：I cannot use material-ui components after update to material-ui@0.15.0-beta.1更新到 material-ui@0.15.0-beta.1 后我无法使用 material-ui 组件
【发布时间】：2016-08-25 12:32:14
【问题描述】：

我在控制台中收到了这条消息：

上下文类型失败：所需上下文 muiTheme 未在 AppBar

AppBar.js:158 未捕获类型错误：无法读取属性“prepareStyles” 未定义的

我的组件中只有一个 AppBar 我认为它应该工作，但...... 这是我非常简单的代码：

import React from 'react';
import {AppBar} from 'material-ui';


    export class MyComponent extends React.Component {

        render() {
            return (
                <div>
                    <AppBar
                        title="Title"
                    />

                </div>
            );
        }

    }

感谢您的帮助...

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

使用 material-ui@0.15.0.beta-1 改变了一些东西。

您可以查看下面的链接了解更多详情。 https://github.com/callemall/material-ui/blob/master/CHANGELOG.md

因此，通过这些更改，您的代码变为：

    import React from 'react';
    import AppBar from 'material-ui/AppBar';
    import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
    import getMuiTheme from 'material-ui/styles/getMuiTheme';

        export class MyComponent extends React.Component {

            getChildContext() {
                return { muiTheme: getMuiTheme(baseTheme) };
            }

            render() {
                return (
                    <div>
                        <AppBar
                            title="Title"
                        />

                    </div>
                );
            }        
        }

        MyComponent.childContextTypes = {
            muiTheme: React.PropTypes.object.isRequired,
        };

【讨论】：

他们为什么让它变得更复杂？如果我可以编写更少的代码来让它工作，那就太好了。
我刚刚从 Bootstrap 切换到了 MUI，现在我看到了这个......我想知道所有东西都需要被包裹起来，我想知道有没有办法在全球范围内做到这一点？
如何使标题可点击？

【解决方案2】：

现在在 0.15.0 中你可以使用 muiThemeProvider：

...

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
 <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
 </MuiThemeProvider>
)

...

因此您不必手动为儿童提供上下文。更多信息在documentation。

【讨论】：

@BruceSun 是的，我在 2 个项目中使用它。
我找到了原因 - 如果我使用 React.createClass() 定义我的组件，它不起作用，但如果我创建一个扩展 React.Component 的 ES6 类，它就起作用。不过，我没有找到任何关于此的文档。
@BruceSun - 我认为建议您从今以后开始使用 ES2015 语法定义您的 React 组件。
但这不适用于开玩笑测试单个组件。我错过了什么吗？
@Viraths 你可以创建帮助函数，如果你需要它，它将用 MuiThemeProvider 包装你的测试组件。然后使用 wrapper.dive() 来获取实际组件而不是提供者...

【解决方案3】：

导入MuiThemeProvider，然后用MuiThemeProvider包裹material-ui组件AppBar。

import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import './App.css';

class App extends Component {

  render() {

    return ( 
      <MuiThemeProvider>
        <div>
          <AppBar title = "Title" />
        </div> 
      </MuiThemeProvider>
    );
  }
}

export default App;

【讨论】：