使用 react 和 material-ui，我可以让一些纸在容器外扩展到全宽吗？

Posted 2023-02-22

【中文标题】使用 react 和 material-ui，我可以让一些纸在容器外扩展到全宽吗？

【英文标题】：With react and material-ui, can I have some paper expand to full width outside a Container?

【发布时间】：2020-09-17 07:34:45

【问题描述】：

如果我有：

   <Container maxWidth='lg'>
    <Grid container spacing=3>
      <Grid item xs=12 md=6 >
        <Image src="/img/undraw_programming_2svr.png" color='transparent' aspectRatio=1041 / 554 />
      </Grid>
<SomeElement />
    </Container>

我怎样才能让SomeElement 扩展到全宽？

【问题讨论】：

someElement 是否在网格容器中？全宽是什么意思？容器元素宽度还是屏幕宽度？

您是否尝试过将容器的位置设置为相对位置，将 someElement 位置设置为绝对位置？

当你说全宽时，你是什么意思？此外，您在 Container 上有哪些样式，以及是否是 Grid 中的 SomeElement。您的问题目前没有足够的信息

您的标记是错误的，除了上述问题。第一个Grid 被错误地关闭/打开。 SomeElement 是 Grid 的兄弟吗？

【参考方案1】：

首先，已经提到的几件事，您的网格标记是错误的，我理解这是一个错误，可能对您的问题不是必需的。

您的问题的答案是否定的，容器的目的是阻止 SomeElement 扩展。然而，一个简单的解决方法是停止容器，渲染 SomeElement，然后启动一个新容器。

<Container>
...
</Container>

<SomeElement />

<Container>
...