material-ui-next - динамически устанавливаемый цвет палитры - PullRequest
Новая
       12

material-ui-next - динамически устанавливаемый цвет палитры

0 голосов
/ 13 мая 2018

Я использую "material-ui": "^1.0.0-beta.33" для своего проекта. То, что я хочу сделать, это установить основной цвет палитры динамически внутри реактивного компонента (цвет будет получен из некоторых API). В основном я хочу переопределить ниже: 

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

Есть ли способ установить это в componentDidMount функции любого компонента?

Ссылка: https://material -ui-next.com /

Ответы [ 2 ]

0 голосов
/ 27 июня 2019

Я делаю именно это.Даже для работы с WebMIDI с помощью ползунков и регуляторов MIDI-контроллера просто для удовольствия.

enter image description here

Основная стратегия заключается в использовании 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

0 голосов
/ 23 июля 2018

Я создал компонент, который использует 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, применяется ко всей теме.Дополнительные настройки могут быть выполнены в зависимости от требований.

...