Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mjclawar opened this issue Jan 25, 2018 · 1 comment
Open

Comments

@mjclawar
Copy link
Member

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
Copy link
Member Author

mjclawar commented Jan 25, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants