リアクション/マテリアルUI - <CardHeader> css

Question

リアクションの使用& Material UI <Card><CardHeader/>内の3つのdivをそれぞれ以下のように左揃え、右揃え、右揃えにレイアウトしようとしています。

変更は簡単ですが、私は詰め物を削除し、display: inheritに変更する必要があるが、この<div>が露出<CardHeader>ためstyle & titleStyleと階層がどのように見える<CardHeader title={someElement}/>

の間に存在するようだ：
...<div><div.myCardHeader><div><span><myTitleElement>...

リアクションとスタイルがとても新しいので、どうやってそれに到達するのか分かりません。 いくつかの代表的なコードが続きます。

ありがとうございました。

// @flow 
import React, { Component } from 'react'; 
import Paper from 'material-ui/Paper'; 
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card'; 

const style = { 
    paper: { 
    height: 250, 
    width: 200, 
    margin: 20, 
    }, 
    card: { 
    header: { 
     container: { 
     display: 'flex',    /* establish flex container */ 
     justifyContent: 'space-between', 
     backgroundColor: 'lightblue' 
     }, 
     padding: 1, 
     height: 26 
    } 
    } 
}; 

const POCardTitle =() => (
    <div className="myContainer" style={style.card.header.container}> 
    <div style={{ width: 25, height: 26, border: '2px dashed red' }}> - </div> 
    <div style={{ width: 25, height: 26, border: '2px dashed blue' }}> - </div> 
    <div style={{ width: 25, height: 26, border: '2px dashed green' }}> - </div> 
    </div> 
); 

export default class POCard extends Component { 

    render() { 
    return (
     <div> 
     <Paper style={style.paper} zDepth={2} > 
      <Card > 
      <CardHeader className="myCardHeader" 
       style={style.card.header} 
       titleStyle={{ paddingRight: 0, display: 'inline' }} 
       title={<POCardTitle />} 
      /> 
      </Card> 
     </Paper> 
     </div> 
    ); 
    } 
} 

Answer 1

私はそこhttps://www.styled-components.com

の礼儀を得ることができたと、次の

const StyledHeader = styled(CardHeader) ` 
    padding: 0px !important; 
    height: 26px !important; 
    > div { 
    display: inherit !important; 
    padding-right: 0px !important; 
    } 
`; 

私は定期的にCSSによるコンポーネントの後に「最初のdiv」を取得する他の方法を見つけることができませんでした...