Reactjs 材质ui下一步-动态设置调色板颜色

我正在为我的项目使用

“材质ui”：“^1.0.0-beta.33”

。 我想做的是在react组件中动态设置主调色板颜色（颜色将从一些api获取）。 基本上，我想覆盖以下内容：

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

有没有办法在任何组件的

componentDidMount

功能中设置此选项

---

参考资料：

我创建了一个使用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));

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“材质ui/样式”导入{withStyles}；
从“材质ui/颜色”导入*作为颜色；
从“材质ui/样式”导入{MuiThemeProvider，createMuiTheme}；
从“react router dom”导入{withRouter}；
导出类ThemeWrapperComponent扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.children}
)
}
}
export const ThemeWrapper=withRouter（connect（mapstatetops）（ThemeWrapper组件））；

下面是我如何围绕此组件包装我的应用程序：

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

---

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

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

基本策略是使用

createMuiTheme

和

ThemeProvider

，并将主题存储在应用程序存储中（

context

，

state

，

redux

），等等

---

你想好了吗？我也需要这个功能。@user1184205请在下面检查我的答案。

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
  }
}

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