MuiThemeProvider: Wie benutzt man verschiedene Themen für verschiedene Routen?

Question

Ich muss das Thema abhängig vom aktuellen Abschnitt der Website leicht ändern.

Es scheint, dass MuiThemeProvider nur muiTheme auf Last setzt; aber es muss aktualisiert werden, wenn sich die Requisiten ändern.

Wie kann das gemacht werden?

Answer 1

Sie können versuchen, das Design in eine Umbruchkomponente einzufügen, die das Design in seinem Zustand hält. Unter Verwendung von React's context stellt diese Komponente den untergeordneten Komponenten eine Funktion zum Ändern des Status zur Verfügung.

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; 

In einigen untergeordneten Komponente können Sie den Kontext zugreifen und die changeTheme Funktion aufrufen ein anderes Thema in den Zustand zu versetzen. Stellen Sie sicher, dass Sie contextTypes einschließen, sonst können Sie nicht auf die Funktion zugreifen.

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; 

Im Stamm Ihrer App Rendern Sie nur den Wrapper.

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

EDIT: Meine erste Lösung könnte abit zu viel gewesen. Da ersetzen Sie das gesamte Thema für die gesamte App. Sie können den MuiThemeProvider auch im Baum verwenden.

In einer untergeordneten Komponente können Sie den MuiThemeProvider erneut verwenden und einige Eigenschaften überschreiben. Beachten Sie, dass sich diese Änderungen auf alle untergeordneten Elemente in diesem MuiThemeProvider auswirken.

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;