【MUI】CardMedia组件相关报错

问题场景：

在使用Material UI v4开发页面的过程中，突然出现了下面的警告，看着很不舒服，尝试着去找到发出该警告的原因。

相关代码：

<Card className={classes.card} raised elevation={6}>
      {/* <ButtonBase className={classes.cardAction} onClick={openPost}> */}
        <CardMedia  className={classes.media} image={post.selectedFile || ''} title={post.title} onClick={openPost} style={{ cursor: 'pointer'}}/>
        <div className={classes.overlay}>
          <Typography variant='h6'>{post.name}</Typography>
          <Typography variant='body2'>{moment(post.createdAt).fromNow()}</Typography>
        </div>
        {(user?.result?.sub === post?.creator || user?.result?._id === post?.creator) ? (
          <div className={classes.overlay2}>
            <Button style={{ color: 'white' }} size='small'
              onClick={() => setCurrentId(post._id)}>
              <MoreHoriz fontSize='medium' />
            </Button>
          </div>
        ) : null }

        <div className={classes.details}>
          <Typography variant='body2' color='textSecondary' gutterBottom>{post.tags.map(tag => `#${tag} `)}</Typography>
        </div>
        <Typography className={classes.title} variant='h5' gutterBottom>{post.title}</Typography>
        <CardContent>
          <Typography variant='body2' color='textSecondary' gutterBottom>{post.message}</Typography>
        </CardContent>
      {/* </ButtonBase> */}
      <CardActions className={classes.cardActions}>
        <Button size='small' color='primary'
          disabled={!user?.result}
          onClick={() => dispatch(likePost(post._id))}>
          {/* <ThumbUpAlt fontSize='small'/>
          喜欢 &nbsp;
          {post.likeCount} */}
          <Likes />
        </Button>
        {(user?.result?.sub === post?.creator || user?.result?._id === post?.creator) ? (
          <Button size='small' color='primary'
            onClick={() => dispatch(deletePost(post._id))}>
            <Delete fontSize='small' />
            删除
          </Button>
        ) : null }
      </CardActions>
    </Card>

问题出在第3行代码所在的CardMedia组件处，我也是第一次用MUI库，可能是不太熟练吧。

解决方法：

添加属性

component='div'

到CardMedia组件上，警告就消失了，控制台一干二净，看着就很舒服。

注意：

该解决方案因人而异，有可能你只是用CardMedia来展示图片，例如：

<CardMedia image={photo} id={post._id} className={classes.cardMedia}/>

此时如果报了同我上面一样的错误，那需要添加的属性可能为：

component='image'

再接再厉！