Reactjs 更新到材质后，我无法使用材质ui组件-ui@0.15.0-beta.1

我在控制台中收到了以下消息：

失败的上下文类型：中未指定所需的上下文

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>
            );
        }

    }

从“React”导入React；
从“物料ui”导入{AppBar}；
导出类MyComponent扩展了React.Component{
render（）{
返回(
);
}
}

---

感谢您在材料方面帮助…

-ui@0.15.0.beta-1一些事情发生了变化

您可以在下面的链接上查看更多详细信息。

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

    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,
        };

从“React”导入React；
从“物料ui/AppBar”导入AppBar；
从“材质ui/styles/baseThemes/LightBaseThemes”导入baseTheme；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
导出类MyComponent扩展了React.Component{
getChildContext（）{
返回{muiTheme:getMuiTheme（baseTheme）}；
}
render（）{
返回(
);
}        
}
MyComponent.childContextTypes={
muiTheme:React.PropTypes.object.isRequired，
};

现在在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>
)

...

。。。
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“./MyAwesomeReactComponent”导入MyAwesomeReactComponent；
常量应用=（）=>(
)
...

因此，你不必手动为孩子们提供上下文。

---

更多信息请参见。

导入MuiThemeProvider，然后使用MuiThemeProvider包装材质ui组件AppBar

import React，{Component}来自'React'；
从“物料ui/AppBar”导入AppBar；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
导入“/App.css”；
类应用程序扩展组件{
render（）{
报税表（
);
}
}
导出默认应用程序；

@BruceSun是的，我在两个项目中使用了它。我找到了原因-如果我使用React.createClass（）定义我的组件，它不起作用，但是如果我创建一个扩展React.component的ES6类，它就会起作用。但是我没有找到任何关于此的文档。@BruceSun-我认为建议您从现在开始使用ES2015语法定义React组件。但这不适用于jest测试单个组件。我遗漏了什么吗？@Viraths如果需要，您可以创建帮助函数，该函数将使用MuiThemeProvider包装您的测试组件。然后使用wrapper.dive（）来访问实际的组件，而不是该提供程序……为什么它们会使它变得更复杂？如果我能写更少的代码来让它工作，那就太好了。我刚刚从引导转换到MUI，现在我看到了这个。。。疯狂的是，所有的东西都需要包装，liek，有没有一种方法可以在全球范围内包装？我想知道如何使标题可点击？