Open mjclawar opened 6 years ago
Super hacky solution:
window.__sdMuiThemeable
.
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
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-L100This 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.