素早くマテリアルUIテーマを変更する - >子供には影響しません

Question

私はmaterial-uiを使用しているreact/reduxアプリケーションで作業しています。

私のCoreLayout-コンポーネント（私の最上位層のコンポーネント）は、（ドキュメントに従って）コンテキストを使用してテーマを設定しています。これは、初期ロード時に期待通りに機能します。

実行時にテーマを切り替えることができるようにします。新しいテーマを選択すると、私のreduxストアが更新され、コンポーネントが更新されます。問題は、CoreLayoutコンポーネントの子どもが影響を受けないことです。初めてです。繰り返しテーマを変更すると（on-changeアクションを送信する選択リストを使用）、子が更新されます。子コンポーネントがプロジェクト階層の2レイヤー下にある場合は、2つのアクション呼び出しの後に更新されます。そのため、コンテキストがどのように引き継がれるかに問題があります。

マイCoreLayout.jsコンポーネント私の子コンポーネント（LeftNavigation.js）

import React from "react"; 
import { connect } from 'react-redux'; 


import { List, ListItem } from 'material-ui'; 

const mapStateToProps = (state) => ({ 
    uiStatus: state.uiStatus 
}); 

export class LeftNavigation extends React.Component { 
    render() { 

     return (
      <div className="left-pane-navigation"> 
       <List subheader="My Subheader" > 
        <ListItem primaryText="Search" /> 
        <ListItem primaryText="Performance Load" /> 
       </List> 
      </div> 
     ); 
    } 
} 

LeftNavigation.contextTypes = { 
    muiTheme: React.PropTypes.object 
}; 

export default connect(mapStateToProps)(LeftNavigation); 

の

import React, { PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import ThemeManager from 'material-ui/lib/styles/theme-manager'; 

const mapStateToProps = (state) => ({ 
    uiStatus: state.uiStatus 
}); 

export class CoreLayout extends React.Component { 
    getChildContext() { 
     return { 
      muiTheme: ThemeManager.getMuiTheme(this.props.uiStatus.get("applicationTheme").toJS()) 
     }; 
    } 

    render() { 
     return (
      <div className='page-container'> 
       { this.props.children } 
      </div> 
     ); 
    } 
} 

CoreLayout.propTypes = { 
    children: PropTypes.element 
}; 

CoreLayout.childContextTypes = { 
    muiTheme: PropTypes.object 
}; 

export default connect(mapStateToProps)(CoreLayout); 

一つ私がthis.contextによって文脈にあるテーマをアクセスすることができます。 muiTheme。 それぞれの子コンポーネント内でgetChildContext（）の別のインスタンスを使用してコンポーネントを更新することができますが、そのような多数のコンポーネントがあります。

テーマを変更すると、私のCoreLayoutコンポーネントのgetChildContextメソッドが呼び出され、すべての子コンポーネントが期待通りにレンダリングされます。

アイデア？

アップデート：モバイルデバイスで期待どおりに動作します（少なくとも、iOS版）

Answer 1

あなたはどの子コンポーネントにgetChildContextを追加することを避けるために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です。