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

Question

如何使这些卡片具有相同的宽度？

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

卡片组件

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

卡 styles

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

不确定是否有可能，因为我的反应知识不是很好，但也许你可以尝试在卡片上设置 minWidth ？

或者由于您在容器上应用了 flex，请尝试应用

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

在卡片上。

flex-basis应该将卡片的基本大小设置为 0，通常情况并非如此。

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

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

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

Answer 2

在卡 styles中将minWidth添加到 root 怎么样？

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

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