Question

我无法使用材质ui网格系统将元素组居中。

问题：外部权限右边的空白。

代码：

const renderProjects = projects.map(project => (
    <Grid item xs={12} sm={6} m={3} lg={3} key={project.title}>
      <ProjectCard
        title={project.title}
        description={project.description}
        image={project.image}
      />
    </Grid>
  ));

  return (
    <Grid
      container
      direction="row"
      justify="center" <==== Doesn't work
      alignItems="center"
    >
      { renderProjects}
    </Grid>
  )

ProjectCard组件仅具有以下样式：

const useStyles = makeStyles({
  root: {
    maxWidth: 300,
  },
  media: {
    height: 100
  },
});

网格图像：

我是为客户端工作的后端开发人员，似乎无法弄清楚。预先感谢！

Answer 1

您需要为卡提供一些保证金。目前，弹性项目会占用X％的空间，具体取决于屏幕尺寸（由您的xs, sm, m, & lg道具定义），并且卡片的最大设置仅为300 {{1} }，因此是上方所附图片中橙色部分所描绘的“右侧空间”。

width

const useStyles = makeStyles({
  root: {
    maxWidth: 300,
    margin: "auto", // <-- add this
    marginBottom: "10px" // <-- only a suggestion. you might want to add spacing below each card
  },
  media: {
    height: 100
  },
});

const projects = [{
  title: "sample title",
  description: "desc",
  image: "https://via.placeholder.com/300x100"
},{
  title: "sample title",
  description: "desc",
  image: "https://via.placeholder.com/300x100"
},{
  title: "sample title",
  description: "desc",
  image: "https://via.placeholder.com/300x100"
},{
  title: "sample title",
  description: "desc",
  image: "https://via.placeholder.com/300x100"
},]

const useStyles = makeStyles({
  root: {
    maxWidth: 300,
    margin: "auto",
    marginBottom: "10px"
  },
  media: {
    height: 100
  },
});

function App() {

  const renderProjects = projects.map((project, index) => (
    <Grid item xs={12} sm={6} m={3} lg={3} key={index}>
      <ProjectCard
        title={project.title}
        description={project.description}
        image={project.image}
      />
    </Grid>
  ));

  return (
    <Grid
      container
      direction="row"
      justify="center"
      alignItems="center"
    >
      {renderProjects}
    </Grid>
  )
}

function ProjectCard({title, description, image}){

  const classes = useStyles();

  return(
    <Card classes={{root: classes.root}}>
      <CardActionArea>
        <CardMedia
          classes={{media: classes.media}}
          component="img"
          image={image}
          title={title}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {title}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}


ReactDOM.render(<App/>, document.getElementById("root"));

Answer 2

它是您在Grid项内使用的md而非m属性，请对其进行更改并查看其是否有效。

React-材质UI网格项中心问题

2 个答案: