Question

我正在为我的项目使用"material-ui": "^1.0.0-beta.33"。我想要做的是在反应组件中动态设置主调色板（颜色将从某些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发送的任何颜色都将应用于整个主题。可以根据需求进行更多定制。

Answer 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

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

2 个答案: