Question

AppBar 为特定类型的儿童应用某些样式。不幸的是，这只发生在直接儿童身上

<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指令

导入组件

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

听起来您需要一个自定义组件来将样式重新路由到您想要的孩子。此版本仅将style转发给子项，其余版本保留在包装组件上（默认为<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>

从材质ui组件中提取样式

2 个答案: