css - React/Material UI - css

Question

使用 React 和 Material UI 我正在尝试在 <Card> 中布置 3 个 div <CardHeader/>这样它分别具有左对齐、居中对齐和右对齐，如下所示。

变化微不足道，我需要删除填充并更改为 display: inherit但似乎这个<div>存在于暴露的 style & titleStyle 之间对于 <CardHeader>和 <CardHeader title={someElement}/>

层次结构如下:
...<div><div.myCardHeader><div><span><myTitleElement>...

作为 React 和样式的新手，我不确定如何去做。下面是一些有代表性的代码。

感谢您的帮助。

// @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”...