Stas Kurilin Stas Kurilin - 4 months ago 19
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={
<div>
<FlatButton label="second" /> <!-- styles are not applied -->
</div>
}/>


jsfiddle

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?

PS
I'm importing components in with import directive

import AppBar from 'material-ui/AppBar';

QoP QoP
Answer

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
        ...
}

jsfiddle