反应/材料界面-css

使用React&materialui，我试图在一个视图中布局3个div，使其分别具有左对齐、中对齐和右对齐，如下所示

更改很简单，我需要删除填充并更改为display:inherit，但这似乎存在于和的公开样式和标题样式之间

层次结构如下所示：

由于对反应和风格如此陌生，我不知道如何去做。 下面是一些有代表性的代码

谢谢你的帮助

// @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>
    );
  }
}

---

我设法到了那里

以及以下各项：

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

我找不到其他方法通过常规CSS到达组件后的第一个div