MUI Grid布局问题：单元素需居中，多元素遵循网格系统

可以通过判断元素数量，动态设置Grid容器的justifyContent属性来实现需求：

• 当元素数量为1时，将容器的justifyContent设为center，让单个卡片居中显示
• 当元素数量大于1时，保持默认的flex-start对齐逻辑，遵循原有的网格布局

修改后的代码如下：

import React from 'react'
import CropDetailsQuery from '../../api/models/cropDetailsQuery'
import SearchCrops from './components/SearchCrops';
import SearchCard from './components/SearchCard';
import { CropContext } from '../../context/crops';
import { Grid } from '@mui/material';


function Search() {
    const [query, setQuery] = React.useState(new CropDetailsQuery());
    const { crops } = React.useContext(CropContext);
    const cropList = Array.from(crops.values()); // 简化原循环生成数组的写法

    return (
        <div>
            <SearchCrops setQuery={setQuery} />
            {/* 根据元素数量动态设置对齐方式 */}
            <Grid container spacing={2} justifyContent={cropList.length === 1 ? 'center' : 'flex-start'}>
                {cropList.map((crop) => (
                    <Grid item xs={12} sm={6} md={4} key={crop.data.name}>
                        <SearchCard query={query} crop={crop} />
                    </Grid>
                ))}
            </Grid>
        </div>
    )
}

export default Search

补充说明： #

1. 用Array.from(crops.values())替代原循环逻辑，写法更简洁高效
2. justifyContent="center"会让Grid容器内的子元素在主轴上居中对齐，刚好适配单元素场景；多元素时子元素会按网格规则填满容器，flex-start的对齐方式不会破坏原有布局
3. 将key属性移至循环最外层的Grid item上，符合React列表渲染的规范写法

内容的提问来源于stack exchange，提问作者Akash Suklabaidya