Stas Kurilin Stas Kurilin - 1 year ago 67
Javascript Question

Extracting styles from material ui component

AppBar applies some styles for children of specific types. Unfortunately it happens only to direct children

<AppBar title="first" iconElementRight={
<FlatButton label="first" />
<AppBar title="second" iconElementRight={
<FlatButton label="second" /> <!-- styles are not applied -->


Hopefully, it seems like AppBar component exposes getStyles method.

exports.getStyles = getStyles;

Unfortunately I cannot figure out way to consume it. Is there are any way do it rather than redefining all styles on my own?

I'm importing components in with import directive

import AppBar from 'material-ui/AppBar';

Answer Source

MuiThemeProvider adds a muiTheme object to the context so you can get all the styles from there.

Comp.contextTypes = {
  muiTheme: React.PropTypes.object

render: function () {
        let {appBar} = this.context.muiTheme; // appBar styles here