如何解决Material UI中Grid项之间Divider不显示及布局错位问题

问题原因 #

• 外层Grid的direction属性错误设置为column，导致所有内容垂直排列，不符合横向布局需求
• 循环内为每个列单独套了一层Grid container，相当于每个列都独占一整行，自然无法正常显示纵向分隔线
• 没有做循环索引判断，最后一个元素后也会多余渲染分隔线

修正后代码 #

import "./styles.css";
import { Grid, Divider } from "@material-ui/core";
export default function App() {
  const tempArray = ['Col 1', 'Col 2', 'Col 3'];
  return(
    <Grid container align='center' direction='row'>
      {tempArray.map((title, index)=>{
        return(
          <>
            <Grid item xs>
              <strong>{title}</strong>
            </Grid>
            {/* 仅非最后一项时渲染分隔线 */}
            {index !== tempArray.length - 1 && <Divider orientation='vertical' flexItem />}
          </>
        );
      })}
    </Grid>
  );
}

改动说明 #

• 将外层Grid的direction改为row，让所有内容横向排列
• 移除循环中多余的Grid container包裹层，所有列和分隔线直接放在最外层Grid容器下
• 循环时获取索引，仅当当前项不是数组最后一项时渲染分隔线，避免末尾出现多余竖线
• 可根据视觉需求给Divider添加边距样式，调整分隔线和列之间的间距

内容的提问来源于stack exchange，提问作者Neha Chaudhary