javascript - 从 Material UI 组件中提取样式

Question

AppBar 为特定类型的 child 应用一些样式。不幸的是，它只发生在直接 child 身上

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

jsfiddle

希望 AppBar 组件公开 getStyles 方法。

exports.getStyles = getStyles; 

不幸的是，我想不出消费它的方法。除了自己重新定义所有样式之外，还有什么方法可以做到这一点？

附言我正在使用导入指令导入组件

import AppBar from 'material-ui/AppBar';

Answer 1

MuiThemeProvider 将一个 muiTheme 对象添加到上下文中，以便您可以从那里获取所有样式。

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

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

jsfiddle