React / Material UI - <CardHeader> css答案

【问题标题】：React / Material UI - <CardHeader> cssReact / Material UI - <CardHeader> css
【发布时间】：2017-06-03 14:40:22
【问题描述】：

使用 React 和 Material UI 我尝试在 <Card> <CardHeader/> 内布局 3 个 div，使其分别具有左、中和右对齐，如下所示。

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

层次结构如下：
...<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>
    );
  }
}

【问题讨论】：

标签： css reactjs material-ui

【解决方案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”...

【讨论】：