如何使 Material UI 网格元素具有粘性？

Question

我正在创建购物车的前端。我已将容器分为两列（使用网格容器和网格项），并在每列内插入了一些组件。左侧包含每个项目的组件，左侧仅包含一个显示订单摘要的组件。这张图说明了我所说的：

我的问题是，当用户滚动时，如何使左侧（订单摘要）粘在页面顶部。我尝试了一些使用z-indexCSS 样式（position: fixed和position: sticky）的方法，但它们破坏了 Material UI 提供的网格结构。另外考虑到视图是响应式的，对于移动屏幕来说，订单摘要组件保留在页面末尾（现在所在的位置）会很棒：

我可以将组件粘贴在桌面上的顶部，但是当我添加自定义样式时，该组件卡在移动视图的顶部，看起来很糟糕。有没有我可能没有注意到的实用方法来实现这一目标？

这是该项目的沙盒：https://codesandbox.io/s/charming-cherry-eh27f

我希望这种将页面分成几列的方式会对某人有所帮助，因为我在网上找到类似的东西有点困难，今天早上我自己也想到了这种方式。同时，如果您对我正在尝试实现的此功能有任何反馈和帮助，我将不胜感激。

更新

下面由 MaCadiz 提供的解决方案工作得很好。我只是想说，如果您想向该项目添加更多功能，请随意创建任何拉取请求。这是 Github 存储库链接：https ://github.com/kleviss/shopping-cart-frontend-react-material

Answer 1

在你的沙箱中，我意识到你在另一个网格项中有一个嵌套的网格项，我不知道这是否是故意的，但我还是删除了它。

<Grid item xs={12} sm={6} md={5} lg={5}>
  <Grid item xs elevation={3}> <==== THIS ONE
    <OrderSummaryItem />
  </Grid>
</Grid>

然后我将 OrderSummaryItem 组件的位置设置为粘性并进行一些调整，我认为它工作正常。检查我从你的沙箱中制作的这个叉子：https://codesandbox.io/s/amazing-darkness-q0o5h