将此添加到根样式中以删除水平滚动条和边距。Material UI添加了额外的元素来实现其样式，因此使用开发人员工具来找出可能混淆css规则的内容可能是一个好主意。在本例中，根目录下的div需要删除其边距并使其为全宽。

root: {
  display: "flex",
  flexGrow: 1,
  "& > div": {
    width: "100vw",
    margin: "0"
  }
}

https://codesandbox.io/s/blue-dew-gpxy2?file=/src/App.js:279-318
也许可以阅读更多关于MUI样式API以及如何使用嵌套样式和规则的信息。

MUI React Grid如果你使用了“间距”属性，那么它会对弹性项应用负边距。目标是使项目和间隙的总宽度小于Flex容器的宽度。
这会导致一些额外的副作用，给项目带来复杂性，例如计算的CSS宽度超过100%，例如width: calc(100% + 24px)。
如果可能的话，我不会使用MUI React Grid。尝试使用CSS flexbox，并使用Box组件进行自己的布局。FYI MUI React Grid是使用flexbox实现的。恕我直言，在90%的情况下，这将完成这项工作，给你更多的控制和更少的意外行为。
我创建了一个示例函数，它计算类似于使用12列系统的MUI React Grid拆分的flex基础。例如，网格项4实际上是4/12 = 1/3 ~ 33.33%。所以你需要一个简单的函数来考虑间隙的数量，并通过减少flex项的宽度来移除这些额外的空间（返回flex-basis字符串值）：

export const calculateFlexBasisWithGap = (gapSizePx: number, totalItemsPerRow: number) => {
  const numberOfGaps = totalItemsPerRow - 1;
  const totalGapSpace = numberOfGaps * gapSizePx;
  const itemPercentage = 100 / totalItemsPerRow;
  const pxToReducePerItem = totalGapSpace / totalItemsPerRow;

  return `calc(${itemPercentage}% - ${pxToReducePerItem}px)`;
};

希望这对你有帮助。
最好的问候M