Material UI＆React：ThemeManagerはコンストラクタではありません

Question

Material UIで小さなReactアプリケーションに追加していますが、私が行っているチュートリアルは時代遅れであり、古いバージョンのMaterial UIを利用していると思います。私は_materialUi2.default.Styles.ThemeManager is not a constructorをウェブコンソールに入れて、Missing class properties transformを続けます。

マテリアル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; 

Answer 1

正しいですが、このチュートリアルは古くなっています。このようにそれをインポートします：コンテキストを通過したキーは、ドキュメントのこのページ

チェックアウトは1番「muiTheme」と呼ばれている必要があります。また

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

http://www.material-ui.com/#/customization/themes

Answer 2

はいチュートリアル古いです。

代わりにこれを行う：あなたは、あなたのメインApp.jsxで次に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 
    } 
}; 

のように別々のフォルダにテーマを定義Theme.jsxをインポートし、getMuiTheme(MyTheme)

にそれを設定することができます

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

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> 

    ); 
    } 

} 

T彼は問題を解決するはずです