css - 如何在 material-ui 卡组件中获得相同的宽度？

Question

如何让这些卡片的宽度相同？

当我在 material-ui 中使用 flexbox 时，这些卡片的宽度大小不一样。我怎样才能解决这个问题？我应该使用 Grid 吗？这是卡片组件和屏幕。 flexbox我申请的是screen。

卡片组件

import React from 'react'
import Card from '@material-ui/core/Card'
import CardActionArea from '@material-ui/core/CardActionArea'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import CardMedia from '@material-ui/core/CardMedia'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import { useStyles } from './classes'

const Post = ({card }) => {
  const classes = useStyles()

  return (
    <div>
    <Card className={classes.root}>    
      <CardActionArea>
        <CardMedia className={classes.media}  image={card.selectedFile}/>
        <CardContent>
          <Typography gutterBottom variant='h5' component='h2'>
            {card.title}
          </Typography>
          <Typography variant='body2' color='textSecondary' component='p'>
            {card.description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>       
        <Button size='small' color='primary'>
          {card.category}
        </Button>
      </CardActions>
    </Card>
  </div>
  )
}

export default Post

卡片样式

import { makeStyles } from '@material-ui/core/styles'

export const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
    margin: "3rem",    
    
  },
  media: {
    height: 140,
  },
}))

屏幕

import React from 'react'
import Post from '../components/card/Post'
import gallery from '../gallery'
import Box from '@material-ui/core/Box';

const Posts = () => {
  return (
    <Box display="flex" flexWrap="wrap" justifyContent="center" m={1} p={1}>
      {gallery.map((card ,index) => (
        <Post key={index} card={card} />
      ))}
    </Box>
  )
}

export default Posts

Answer 1

不确定是否可行，因为我的 react 知识不是很好，但也许你可以尝试在卡片上设置一个 minWidth？

或者因为你在容器上应用了 flex，尝试应用

    flex-grow: 1;
    flex-basis: 0;

在卡片上。

flex-basis 应该将卡片的基本尺寸设置为 0，通常情况下不是这种情况。

flex-grow 会将剩余的大小平均分配给卡片，但由于通常卡片的基本大小不是 0，因此分布看起来不均匀。

通常使用这 2 个 css 标签可以解决这些问题。但就像我在开始时所说的那样，我对 React 的了解并不多，所以我真的不知道这是否也适用于 React。

我希望这有助于或至少将您推向正确的方向。