[英]React.js Material UI - CardActionArea with flex display - children elements don't use full width
直截了当-我已经尝试使用CardActionArea
组件的flexDirection: 'column'
将display
样式参数从block
替换为flex
。 这样做的原因是要确保CardContent
对于连续的每张Card
具有相同的高度-这是我实现的。 但是...更改display
后, CardHeader
和CardContent
无法实现width: '100%'
。 下图应阐明我的意思。
渲染
<Card className={classes.card}>
<CardActionArea
className={classes.cardActionArea}
onClick={this.loadGroup}
>
<CardHeader
avatar={
<FolderIcon />
}
classes={{
root: classes.header,
title: classes.headerTitle,
subheader: classes.headerSubheader
}}
title={this.state.group.name}
subheader={this.renderModuleCount()}
/>
<CardContent className={classes.content}>
{this.renderContent()}
</CardContent>
</CardActionArea>
<CardActions className={classes.actions}>
<IconButton onClick={this.showDialog}>
<DeleteIcon />
</IconButton>
</CardActions>
</Card>
样式
card: {
width: '30%',
margin: theme.spacing(1),
display: 'flex',
flexDirection: 'column',
},
cardActionArea: {
flexGrow: 1,
display: 'flex',
flexDirection: 'column'
},
header: {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText,
width: '100%',
},
headerTitle: {
color: theme.palette.secondary.contrastText,
},
headerSubheader: {
color: theme.palette.secondary.contrastText,
},
content: {
flexGrow: 1,
},
我正在寻找如何解决这个问题。 我在ButtonBase
, CardActionArea
MUI组件上找不到任何padding
或margin
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.