时间戳

首页 > 解决方案 > 素材卡内容溢出图标栏

javascript - 素材卡内容溢出图标栏

问题描述

我正在使用 Material UI 卡。我在每张卡片的底部都有一个图标栏。卡中的媒体超出了图标栏，如下图所示：

在此处输入图像描述

这是我将组件放在一起的代码：

return (
  <Card className={classes.card} >
    <CardHeader
      avatar={
        <Avatar aria-label={authorAvatar} src={authorImg} className={classes.avatar}/>
      }
      action={
        <Fieldset className={classes.date}>
          {postDate}
        </Fieldset>
      }
      title={post.title}          
      subheader={
        <Link to={userUrl}>
          {authorName}
        </Link>
      }
    />
    <div>
      <CardContent >
        <div className={classes.content} dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(bodyHtml)}}></div>
      </CardContent>
    </div>
    <CardActions className={classes.actions} >
      <IconButton
        className={classnames(classes.unliked, {
          [classes.liked]: this.state.liked,
        })}
        aria-label="Add to favorites"
        onClick={this.handleFavourite}
      >
        <FavoriteIcon />
      </IconButton>

以下是课程：

const styles = theme => ({
  card: {
    marginTop: 20,
    sizing, maxHeight: 600,
  },
  content: {
    height: 50,
    marginBottom: 100,
    //paddingTop: '56.25%', // 16:9
    //sizing, maxHeight: 50,
  },
  actions: {
    marginTop: 20,
    display: 'flex',
  },

我如何让这些东西很好地工作，内容在图标栏之前停止并具有可调节的边距？

标签： javascriptreactjsmaterial-ui

解决方案

如果您希望卡片与内容一起扩展，只需从内容样式中删除固定高度并从卡片样式中删除 maxHeight

const useStyles = makeStyles(() => ({
  card: {
    marginTop: 20,
    sizing
  },
  content: {
    marginBottom: 100
    //paddingTop: '56.25%', // 16:9
    //sizing, maxHeight: 50,
  },
  actions: {
    marginTop: 20,
    display: "flex"
  }
}));

https://codesandbox.io/s/material-demo-forked-jp1xe?file=/demo.js

但是，如果您想让它们保持最大高度，只需在内容中添加溢出样式

  content: {
    height: 50,
    marginBottom: 100,
    overflow: 'auto',
    //paddingTop: '56.25%', // 16:9
    //sizing, maxHeight: 50,
  },

推荐阅读