reactjs - MuiThemeProvider : How to use different themes for different routes?

Question

我需要根据站点的当前部分稍微更改主题。

似乎 MuiThemeProvider 只在加载时设置 muiTheme；但需要在 props 变化时更新。

如何做到这一点？

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

编辑:我的第一个解决方案可能有点太多了。因为您要替换整个应用程序的整个主题。您也可以像这样在树下使用 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 并覆盖一些属性。请注意，这些更改将反射(reflect)到此 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;