Figure out global MuiThemeProvider for multiple components in one app

[mjclawar]

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]

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(<NAME OF THEME>);

const Main = () => (
  <MuiThemeProvider muiTheme={muiTheme}>
    <AppBar title="My AppBar" />
  </MuiThemeProvider>
);

use the global theme object by combining the two theme objects, like:

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