MuiThemeProvider:如何针对不同的路线使用不同的主题? [英] MuiThemeProvider: How to use different themes for different routes?

问题描述

我需要根据网站的当前部分略微更改主题.

I need to slightly change the theme depending on the current section of the site.

似乎MuiThemeProvider仅在加载时设置muiTheme；但是道具改变时需要更新.

It seems that MuiThemeProvider only sets muiTheme on load; but it needs to be updated when the props change.

这怎么办?

推荐答案

您可以尝试将主题放在包装组件中，以使主题保持其状态.使用反应的上下文，此组件向子组件公开一个函数以更改状态.

You can try to put the theme in a wrapping component that keeps the theme in it's state. Using React's context this component exposes a function to child components to change the state.

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，否则您将无法访问该函数.

In some child component you can access the context and call the changeTheme function to set a different theme in the state. Make sure to include contextTypes else you can't access the function.

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;

在应用程序的根目录下，渲染包装器.

In the root of your app just render the wrapper.

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

我的第一个解决方案可能是太多了.由于您要替换整个应用程序的整个主题.您也可以像这样在树下使用MuiThemeProvider.

My first solution might have been abit too much. Since you are replacing the whole theme for the whole app. You can also use the MuiThemeProvider down the tree like so.

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内部的所有子级上.

In a child component you can just use the MuiThemeProvider again and override some properties. Note that these changes will reflect on all the children inside this 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;

这篇关于MuiThemeProvider:如何针对不同的路线使用不同的主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！