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

Question

我正在"material-ui": "^1.0.0-beta.33"为我的项目使用。我想做的是在react组件内部动态设置主调色板颜色（颜色将从某些api中获取）。基本上我想覆盖以下内容：

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

有没有办法在componentDidMount任何组件的功能中对此进行设置？

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

Answer 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 发送的任何颜色都会应用于整个主题。可以根据要求进行更多定制。