MuiThemeProvider：異なるルートで異なるテーマを使用するにはどうすればよいですか？

Question

サイトの現在のセクションに応じてテーマを少し変更する必要があります。

MuiThemeProviderはロード時にmuiThemeしか設定されていないようです。小道具が変わるときに更新する必要があります。

どうすればいいですか？

Answer 1

テーマをラップコンポーネントに配置して、テーマをその状態に保つことができます。 React's contextを使用すると、このコンポーネントは子コンポーネントに関数を公開して状態を変更します。

import React, { Component } from 'react'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import PropTypes from 'prop-types'; 
import theme from './theme'; 
import themeOther from './theme-other' 

class Wrapper extends Component { 
    static childContextTypes = { 
    changeTheme: PropTypes.func 
    }; 

    constructor(props) { 
    super(props); 
    this.state = { 
     muiTheme: getMuiTheme(theme) 
    }; 
    } 

    getChildContext() { 
    return {changeTheme: this.changeTheme}; 
    } 

    changeTheme =() => { 
    this.setState({ 
     muiTheme: getMuiTheme(themeOther) 
    }) 
    }; 

    render() { 
    return (
     <MuiThemeProvider muiTheme={this.state.muiTheme}> 
     {this.props.children} 
     </MuiThemeProvider> 
    ) 
    } 
} 

export default Wrapper; 

いくつかの子コンポーネントでは、コンテキストにアクセスし、状態の異なるテーマを設定しchangeTheme関数を呼び出すことができます。 contextTypesを含めるようにしてください。それ以外の場合は、関数にアクセスできません。

import React, { Component } from 'react'; 
import RaisedButton from 'material-ui/RaisedButton'; 
import PropTypes from 'prop-types' 

class ChildComponent extends Component { 
    static contextTypes = { 
    changeTheme: PropTypes.func 
    }; 

    render() { 
    return (
     <RaisedButton 
     primary 
     onTouchTap={this.context.changeTheme} 
     label="Change The Theme" 
     /> 
    ); 
    } 
} 

export default ChildComponent; 

アプリのルートでは、ラッパーをレンダリングするだけです。

ReactDOM.render(
    <Wrapper> 
    <App /> 
    </Wrapper>, 
    document.getElementById('root') 
); 

EDIT： 私の最初のソリューションはあまりABITされている場合があります。あなたはアプリ全体のテーマ全体を置き換えているからです。また、MuiThemeProviderをツリーのように使用することもできます。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 
import inject from 'react-tap-event-plugin'; 
inject(); 

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import theme from './theme'; 

ReactDOM.render(
    <MuiThemeProvider muiTheme={getMuiTheme(theme)}> 
    <App /> 
    </MuiThemeProvider>, 
    document.getElementById('root') 
); 

子コンポーネントでは、もう一度MuiThemeProviderを使用していくつかのプロパティをオーバーライドできます。これらの変更は、このMuiThemeProvider内のすべての子に反映されることに注意してください。

import React, { Component } from 'react'; 
import RaisedButton from 'material-ui/RaisedButton'; 

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import theme from './theme'; 
import { green800, green900 } from 'material-ui/styles/colors'; 

const localTheme = getMuiTheme(Object.assign({}, theme, { 
    palette: { 
    primary1Color: green800, 
    primary2Color: green900 
    } 
})); 

class App extends Component { 
    render() { 
    return (
     <div> 

     <RaisedButton 
      primary 
      label="Click" 
     /> 


     <MuiThemeProvider muiTheme={localTheme}> 
      <RaisedButton 
      primary 
      label="This button is now green" 
      /> 
     </MuiThemeProvider> 


     </div> 
    ); 
    } 
} 

export default App;