素材uiコンポーネントからスタイルを抽出する

Question

AppBarは、特定のタイプの子どもたちにいくつかのスタイルを適用します。残念ながら、それが直接の子

jsfiddle

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

にのみ発生コンポーネントが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>