reactjs - 如何在我的材质网格中使每张卡片的大小相同

Question

我学习 React 并遵循本教程，但即使我有相同的代码，结果也不一样。从教程中我想要一个像这样的网格：

教程中的图片

但我得到的是：

图片来自我的代码

import React, { Component } from 'react';
import { connect } from "react-redux";
import { withStyles } from '@material-ui/styles';
import { Grid, Paper, Typography } from "@material-ui/core";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
const images = require.context('../../public/images', true);

export class Posts extends Component {
    constructor() {
        super();
    }

    componentDidUpdate(prevProps) {

    }
    render() {
        const { classes } = this.props;
        return (
            <div style={{ marginTop: 20, padding: 30 }}>
                <Grid container spacing={40} justify="center">
                    {this.props.books.map(post => (
                        <Grid item key={post.title} Box width={1 / 4}>
                            <Card>
                                <CardActionArea>

                                    <CardContent>
                                        <Typography gutterBottom variant="h5" component="h2">
                                            {post.title}
                                        </Typography>
                                        <Typography component="p">{post.description}</Typography>
                                        <Typography component="p">{post.author}</Typography>
                                        <Typography component="p">{post.genre}</Typography>
                                        <Typography component="p">{post.publish_date}</Typography>
                                        <Typography component="p">{post.price}</Typography>

                                    </CardContent>


                                </CardActionArea>
                            </Card>
                        </Grid>
                    ))}
                </Grid>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        books: state.reducer.booksList
    }
}

export default connect(mapStateToProps)(withStyles(styles)(Posts));

我究竟做错了什么？我认为这是迫使卡片变大的文本，但我还没有阅读过如何限制文本（如果可能的话）

Answer 1

你post.title的 s 很长。您可以使用流体网格。Box width={1 / 4}从中删除Grid item。

<Grid item key={post.title} xs={3}>

xs={3}缩放到容器的 1/4。

您还可以设置 noWrap 属性以显示长标题的省略号而不是换行。

<Typography noWrap ...>
  {post.title}
</Typography>

Answer 2

您可以将样式应用于卡片

 var cardStyle = {
    display: 'block',
    width: '30vw',
    transitionDuration: '0.3s',
    height: '45vw'
}

在您的 CardStyle 中，您可以通过以下方式应用上述样式

  <Card style={cardStyle}>
                <CardHeader
                  title="URL Avatar"
                  subtitle="Subtitle"
                  avatar="https://placeimg.com/800/450/nature"
                />