Javascript 资料界面及；反应：管理器不是构造函数

我正在将Material UI添加到一个小型React应用程序中，但我相信我正在学习的教程已经过时，他们正在使用Material UI的旧版本。我一直在获取

\u materialUi2.default.Styles.TheManager不是web控制台中的构造函数

，而且

缺少类属性转换

MaterialUI的文档不是很好，我不确定是否有更好的资源来查看他们的最新文档

我认为问题在于

管理器.setPalette（）

。有什么建议吗

import React from 'react';
import mui from 'material-ui';
import MessageList from './MessageList.jsx';

// Material UI
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import Colors from 'material-ui/lib/styles/colors';
import AppBar from 'material-ui/lib/app-bar';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

class App extends React.Component {
  constructor() {
    super();

    ThemeManager.setPalette({
      primary1Color: Colors.blue500,
      primary2Color: Colors.blue700,
      primary3Color: Colors.blue100,
      accent1Color: Colors.pink400
    });
  }

  static childContextTypes = {
    muitheme: React.PropTypes.object
  }

  getChildContext() {
    return {
      muiTheme: ThemeManager.getMuiTheme()
    }
  }

  render() {
    return (
      <div>
        <AppBar title="Chat App"/>
        <MessageList />
      </div>
    );
  }
}

export default App;

从“React”导入React；
从“物料界面”导入mui；
从“./MessageList.jsx”导入MessageList；
//材料界面
从“材质ui/lib/styles/theme manager”导入主题管理器；
从“材质ui/lib/styles/Colors”导入颜色；
从“物料界面/库/应用程序栏”导入应用程序栏；
从“材质ui/lib/styles/getmuiteme”导入getmuiteme；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
管理器设置调色板({
Primary1颜色：颜色。蓝色500，
primary2Color:Colors.blue700，
primary3Color:Colors.blue100，
accent1Color:Colors.pink400
});
}
静态childContextTypes={
muitheme:React.PropTypes.object
}
getChildContext（）{
返回{
muiTheme:themanager.getMuiTheme（）
}
}
render（）{
返回(
);
}
}
导出默认应用程序；

你说得对，教程已经过时了。按如下方式导入：

import ThemeManager from 'material-ui/lib/styles/theme-manager';

另外：通过上下文传递的密钥必须被称为“muiTheme”

---

查看此文档页面上的1号文件：

是，教程已经过时

而不是这样做：

ThemeManager.setPalette({
      primary1Color: Colors.blue500,
      primary2Color: Colors.blue700,
      primary3Color: Colors.blue100,
      accent1Color: Colors.pink400
    });

您可以在一个单独的文件夹中定义主题，如

theme.jsx

import Colors from 'material-ui/lib/styles/colors';

export default {
  palette: {
     primary1Color: Colors.blue500,
     primary2Color: Colors.blue700,
     primary3Color: Colors.blue100,
     accent1Color: Colors.pink400
  }
};

然后在主

App.jsx

中，导入

Theme.jsx

，并将其设置为

getMuiTheme（MyTheme）

import React，{Component}来自'React'；
从“./MessageList.jsx”导入MessageList；
从“材质ui/lib/styles/theme manager”导入主题管理器；
从“物料界面/库/应用程序栏”导入应用程序栏；
从“/Theme.jsx”导入MyTheme；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
}
静态childContextTypes={
muiTheme:React.PropTypes.object
}
getChildContext（）{
返回{
博物馆：博物馆管理员。博物馆（神话博物馆）
};
}
render（）{
返回(
);
}
}

---

这应该可以解决问题

是的，我已经在中添加了它（参见上面的代码），但我不确定还有什么可能过时。我在看这个例子，但是在这个例子中，他们需要一个原始的主题文件（他们自己的）……我不确定它是什么样子。//通过上下文传递的键必须叫做“muiTheme”，尽量使你的组件与链接中的组件相似，我看到上面的一个输入错误，在上下文中使用所有小写字母就是这样！该死的打字错误。谢谢

import React, {Component} from 'react';
import MessageList from './MessageList.jsx';

import ThemeManager from 'material-ui/lib/styles/theme-manager';
import AppBar from 'material-ui/lib/app-bar';
import MyTheme from './Theme.jsx';

export default class App extends Component {
  constructor(){
    super();
  }

  static childContextTypes = {
   muiTheme: React.PropTypes.object
 }

 getChildContext(){
   return {
     muiTheme: ThemeManager.getMuiTheme(MyTheme)
   };
 }

  render(){
    return(
      <div>
          <AppBar title="Chat App"/>
          <MessageList />
      </div>

    );
  }

}