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

편집 : 내 최초의 솔루션을 너무 많이 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;