从 material ui 组件中提取样式

Question

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

<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;

不幸的是我想不出消费它的方法。有什么办法可以做到这一点而不是自己重新定义所有样式吗？

PS 我正在使用导入指令导入组件

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

Answer 2

听起来您需要一个自定义组件来将样式重新路由到您想要的 child。此版本仅将 style 转发到 child，其余部分保留在包装组件上（默认为 <div>），但可以根据您的要求进行定制。

        const StyleDelegate = function (props) {
  const {component: Component, children, style, ...rest} = props;
  // pass style to the only child and everything else to the component
  // could be further customized for other props
  return (
      <Component {...rest}>
          {React.cloneElement(children, {style})}
      </Component>
  );
};

StyleDelegate.defaultProps = {
    component: 'div'
};

const AppBar = function (props) {
  return (
    <div>
      {props.title}
      {React.cloneElement(props.iconElementRight, {style: {color: 'blue'}})}
    </div>
  );
}
  
ReactDOM.render(<AppBar
                  iconElementRight={<StyleDelegate><span>Icon</span></StyleDelegate>}
                  title="title" />,
                document.querySelector('#app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

从 material ui 组件中提取样式

Extracting styles from material ui component

javascript

reactjs

react-jsx

material-ui