Material UI 设置网格项目的宽度和间距（例如，一行有 10 个项目）答案

【问题标题】：MaterialUI set grid item width and spacing (e.g. have 10 items on row)Material UI 设置网格项目的宽度和间距（例如，一行有 10 个项目）
【发布时间】：2021-01-18 21:21:59
【问题描述】：

当网格项不是整数 [1..12] 时，如何更改其宽度？例如，如果我想在 12/10=1.2 的行中有 10 个项目，但是当我设置 xs={1.2} 时会出现错误：

Warning: Failed prop type: Invalid prop `xs` of value `1.2` supplied to `ForwardRef(Grid)`, 
expected one of [false,"auto",true,1,2,3,4,5,6,7,8,9,10,11,12].

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这是我知道 atm 的唯一解决方案：

import React from "react";
import { Grid } from "@material-ui/core";

export default function App() {
  const list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  return (
    <div className="App">
      <Grid container>
        {Array.from(Array(5)).map(k => {
          return <React.Fragment key={`grid-row-${k}`}>
          <Grid item xs={1} />
        {list.map((i) => (
          <Grid
            item
            xs={1}
            key={`item-${i}`}
            style={{ border: "1px solid black" }}
          >
            {i}
          </Grid>
        ))}
        <Grid item xs={1} />
        </React.Fragment>
        })}
        
      </Grid>
    </div>
  );
}

【讨论】：

【解决方案2】：

这是我要做的，我对所有项目网格使用xs={1}，并将 justify="space-between" 添加到容器网格。

<Grid container justify="space-between" > 
  <Grid item xs={1} ></Grid>
  <Grid item xs={1} ></Grid>
  <Grid item xs={1} ></Grid>
  <Grid item xs={1} ></Grid>
  <Grid item xs={1} ></Grid>
  <Grid item xs={1} ></Grid>
  <Grid item xs={1} ></Grid>
  <Grid item xs={1} ></Grid>
  <Grid item xs={1} ></Grid>
  <Grid item xs={1} ></Grid>
</Grid>

这样，它在所有项目网格之间平均分配空间

【讨论】：