React / Material UI - <cardheader> css

Question

使用React＆amp;素材用户界面我尝试在<Card> <CardHeader/>内布置3个div，使其分别具有左对齐，中对齐和右对齐，如下所示。

此更改非常简单，我需要删除填充并更改为display: inherit，但<div> style & titleStyle和<CardHeader>之间的<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> ); } }

对React和风格如此陌生，我不确定如何实现它。 一些代表性的代码如下。

感谢您的帮助。

curl -sSL https://raw.githubusercontent.com/hyperledger/fabric/master/examples/e2e_cli/bootstrap.sh | bash

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