[英]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.