如何使 Material UI 网格元素具有粘性？
How to make a Material UI grid element sticky?
我正在为购物车创建前端。我将容器分成两列（使用 Grid 容器和 Grid 项），并在每一列中插入了一些组件。左侧包含每个项目的组件，左侧仅包含一个显示订单摘要的组件。这张图说明了我在说什么：
我的问题是当用户滚动时如何使左侧（订单摘要）粘在页面顶部。我尝试了一些使用 z-index 和服装 CSS 样式（position: fixed 和 position: sticky）的方法，但它们破坏了 Material [=43] 的网格结构=] 优惠。还考虑到视图是响应式的，对于移动屏幕，订单摘要组件保留在页面末尾现在的位置会很棒：
我可以实现将组件粘贴在桌面上的顶部，但是当我添加自定义样式时，该组件会卡在移动视图的顶部并且看起来很糟糕。有什么我可能没有注意到的实用方法吗？
这里是项目的沙盒：https://codesandbox.io/s/charming-cherry-eh27f
我希望这种将页面分成多栏的方式对某些人有所帮助，因为我在网上费了一番功夫才找到类似的东西，今天早上我自己想到了这种方式。同时，对于我正在尝试实现的此功能的任何反馈和帮助，我将不胜感激。
更新
下面由 MaCadiz 提供的解决方案完全可以正常工作。我只是想说，如果您想向该项目添加更多功能，请随时创建任何拉取请求。这是 Github 回购 link：https://github.com/kleviss/shopping-cart-frontend-react-material
在您的沙盒中，我发现您在另一个网格项中嵌套了一个网格项，我不知道这是不是故意的，但我还是将其删除了。
<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
如果 position:"sticky" 不起作用，请尝试 position:"fixed"。
我正在为购物车创建前端。我将容器分成两列（使用 Grid 容器和 Grid 项），并在每一列中插入了一些组件。左侧包含每个项目的组件，左侧仅包含一个显示订单摘要的组件。这张图说明了我在说什么：
我的问题是当用户滚动时如何使左侧（订单摘要）粘在页面顶部。我尝试了一些使用 z-index 和服装 CSS 样式（position: fixed 和 position: sticky）的方法，但它们破坏了 Material [=43] 的网格结构=] 优惠。还考虑到视图是响应式的，对于移动屏幕，订单摘要组件保留在页面末尾现在的位置会很棒：
我可以实现将组件粘贴在桌面上的顶部，但是当我添加自定义样式时，该组件会卡在移动视图的顶部并且看起来很糟糕。有什么我可能没有注意到的实用方法吗？
这里是项目的沙盒：https://codesandbox.io/s/charming-cherry-eh27f
我希望这种将页面分成多栏的方式对某些人有所帮助，因为我在网上费了一番功夫才找到类似的东西，今天早上我自己想到了这种方式。同时，对于我正在尝试实现的此功能的任何反馈和帮助，我将不胜感激。
更新
下面由 MaCadiz 提供的解决方案完全可以正常工作。我只是想说，如果您想向该项目添加更多功能，请随时创建任何拉取请求。这是 Github 回购 link：https://github.com/kleviss/shopping-cart-frontend-react-material
在您的沙盒中，我发现您在另一个网格项中嵌套了一个网格项，我不知道这是不是故意的，但我还是将其删除了。
<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
如果 position:"sticky" 不起作用，请尝试 position:"fixed"。