物料UI&React:ThemManager不是构造函数

Material UI & React: ThemeManager is not a constructor

本文关键字：ThemManager 构造函数 React UI amp 物料      更新时间：2024-02-07

我正在将Material UI添加到一个小型React应用程序中，但我认为我正在学习的教程已经过时，他们正在使用旧版本的Material UI。我一直在web控制台中获取_materialUi2.default.Styles.ThemeManager is not a constructor和Missing class properties transform。

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

我认为问题出在ThemeManager.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;

你说得对，教程已经过时了。像这样导入：

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

此外：通过上下文传递的密钥必须称为"muiTheme"

查看本页文档中的1号：http://www.material-ui.com/#/customization/themes

是的，教程已经过时了。

而不是这样做：

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

这应该可以解决

的问题
相关文章：