javascript - React.js 材质 UI - 具有弹性显示的 CardActionArea - 子元素不使用全宽

Question

直截了当-我尝试将display样式参数 from blocktoflex替换flexDirection: 'column'为 forCardActionArea组件。这样做的原因是为了确保CardContent每一Card行都有相同的高度——我做到了。但是......CardHeader并且在CardContent更改. 下面的插图应该能阐明我的意思。width: '100%'display

以下是相关代码

使成为

<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,
},

我正在寻找如何解决这个问题。我找不到任何padding或margin上ButtonBase的CardActionAreaMUI 组件。

标签： javascriptreactjsmaterial-ui

Answer 1

最后我找到了解决方案。样式类cardActionArea需要使用以下内容：

cardActionArea: {
  flexGrow: 1,
  flexDirection: 'column',
  alignItems: 'stretch',
},

结果：