material-ui-next - 动态设置调色板颜色答案

【问题标题】：material-ui-next - Dynamically set palette colormaterial-ui-next - 动态设置调色板颜色
【发布时间】：2018-10-23 05:15:44
【问题描述】：

我在我的项目中使用"material-ui": "^1.0.0-beta.33"。我想要做的是在反应组件中动态设置 primary palette color（颜色将从一些 api 中获取）。基本上我想覆盖下面：

const theme = createMuiTheme({
  palette: {
    primary: "some color from api" 
  },
})

有没有办法在任何组件的componentDidMount 函数中设置这个？

参考：https://material-ui-next.com/

【问题讨论】：

你想明白了吗？我也需要这个功能。
@user1184205 在下面查看我的答案。

标签： reactjs react-redux material-ui

【解决方案1】：

我创建了一个使用 MuiThemeProvider 的组件并将我的整个应用程序包装在该组件周围。下面是组件的结构。

import React, {Component} from "react";
import {connect} from "react-redux";
import {withStyles} from 'material-ui/styles';
import * as colors from 'material-ui/colors';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { withRouter } from 'react-router-dom';

export class ThemeWrapperComponent extends Component {
  constructor(props){
    super(props);
  }

  render(){
    return (
      <MuiThemeProvider theme={createMuiTheme(
        {
          palette: {
            primary: { main: **colorFromApi** },
          }
      )}>
        <div>
            { this.props.children }
        </div>
      </MuiThemeProvider>
    )
  }
}

export const ThemeWrapper = withRouter(connect(mapStateToProps)(ThemeWrapperComponent));

以下是我如何围绕这个组件包装我的应用程序：

 <ThemeWrapper>
    <div>          
      <Routes/>
    </div>                
 </ThemeWrapper>

现在，您从 api 发送的任何颜色都将应用于整个主题。可以根据需要进行更多的定制。

【讨论】：

【解决方案2】：

我就是这样做的。甚至使用 MIDI 控制器滑块和旋钮让它与 WebMIDI 一起工作只是为了好玩。

基本策略是使用createMuiTheme和ThemeProvider并将主题存储在您的应用商店中（context、state、redux）等

class ThemeManager extends React.Component {
  getThemeJson = () => this.props.context.themeJson || defaultThemeJson

  componentDidMount () {
    const themeJson = this.getThemeJson()
    const theme = createMuiTheme(themeJson)
    this.props.setContext({ theme, themeJson })
  }

  render () {
    const { children, context } = this.props
    const theme = context.theme
    return theme
      ? <ThemeProvider theme={theme}>{children}</ThemeProvider>
      : children
  }
}

https://github.com/platform9/pf9-ui-plugin/blob/master/src/app/ThemeManager.js

然后您只需更新应用程序的状态。

  handleImport = themeStr => {
    const themeJson = JSON.parse(themeStr)
    const theme = createMuiTheme(themeJson)
    this.props.setContext({ theme, themeJson })
  }

https://github.com/platform9/pf9-ui-plugin/blob/master/src/app/plugins/theme/components/ImportExportPanel.js#L17

【讨论】：