StratoDem / sd-material-ui

material-ui components for Dash
MIT License
194 stars 27 forks source link

Figure out global MuiThemeProvider for multiple components in one app #51

Open mjclawar opened 6 years ago

mjclawar commented 6 years ago

Right now, each component gets its own MuiThemeProvider like: https://github.com/StratoDem/sd-material-ui/blob/v1.7.5/src/components/SDDialog.react.js#L90-L100

This prevents from changing colors globally across a Dash application. We should figure out a way to set a global (perhaps, unfortunately, window) variable(?) that allows for these components to grab the same styles object, if the Dash developer wants to modify the base theme.

See here for more on customizing the theme.

mjclawar commented 6 years ago

Super hacky solution:

  1. Create a "MuiThemeable" Dash component that takes props and updates something like window.__sdMuiThemeable.
  2. Have each Dash component instead of the current approach
    
    import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
    import getMuiTheme from 'material-ui/styles/getMuiTheme';

const muiTheme = getMuiTheme();

const Main = () => (

);

use the global theme object by combining the two theme objects, like:
```js
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const muiTheme = getMuiTheme(<NAME OF THEME>);

const Main = () => (
  <MuiThemeProvider muiTheme={myCombineFunc(muiTheme, window.__sdMuiThemeable)}>
    <AppBar title="My AppBar" />
  </MuiThemeProvider>
);

This will require an additional component (the MuiThemeable Dash component), as well as a function to combine the two theme objects (this would likely be _.merge from lodash.

The MuiThemeable Dash component would look something like:

class MuiThemeable extends React.Component {
    componentWillMount() {
        window.__sdMuiThemeable = this.props.sdMuiThemeable;
    }

    componentWillReceiveProps() {
        if !isEqual(nextProps.sdMuiThemeable, this.props.sdMuiThemeable)
            window.__sdMuiThemeable = this.props.sdMuiThemeable;
    }

    render() {
        return null;
    }
}

where isEqual is _.isEqual from lodash