簡體   English   中英

React - 材質 UI 網格項目中心問題

[英]React - Material UI grid items center issue

我無法使用材質 ui 網格系統將元素組居中。

問題:在 exteme 右邊的邊距空間。

代碼:

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
  },
});

網格圖像:

在此處輸入圖像描述

我是為客戶工作的后端開發人員,似乎無法弄清楚這一點。 提前致謝!

我有同樣的問題,如果你使用justifyContent而不是justify顯然它確實有效。 您不需要添加樣式標簽。

(MUI v5.8.0)

在此處輸入圖像描述

您需要為您的卡片提供一些保證金。 目前,根據屏幕尺寸(由您的xs, sm, m, & lg道具定義),彈性項目占用 X % 的空間,並且卡片僅設置為最多占用300 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"));
 <body> <div id="root"></div> <!-- React --> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- Babel --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <!-- MUI --> <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script> <script type="text/babel"> const { Button, Grid, Card, CardActionArea, CardMedia, CardContent, Typography, CardActions, makeStyles } = MaterialUI; </script> </body>

您在md項目中使用的不是m屬性,請更改它並查看它是否有效。

只需添加style={{display:'flex'; justifyContent:'space-evenly'}} style={{display:'flex'; justifyContent:'space-evenly'}}到網格容器。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM