材质 UI 纸张在小视口处未占据全宽答案

【问题标题】：Material UI Paper not taking full width at small view port材质 UI 纸张在小视口处未占据全宽
【发布时间】：2021-11-03 03:11:57
【问题描述】：

我正在开发一个网站，我在其中使用组件进行暗模式显示，但在缩小到 600 像素以下时，组件缩小得太多，而不是其他组件。

我的应用程序：

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <ThemeChanger>
        <Paper square elevation={0}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </Paper>
      </ThemeChanger>
    </>
  );
 }

以下是一些示例图片：

这是宽度大于 700 像素的 UI 图像

这是一张宽度小于 600 像素的图片

我已经尝试过的事情添加 flex , min-width : "100%" 在组件除组件外，其他所有组件都表现良好

我正在使用的 TechStack NextJS v11 材质 UI v5

【问题讨论】：

标签： css reactjs material-ui react-material styleddocument

【解决方案1】：

通过查看整个 css 找不到解决方案。

对我来说，父元素的大小限制似乎阻碍了子元素的成长。如果父元素具有固定大小或没有 100% 宽度，您将无法使子元素占据全宽。

检查两个屏幕上的元素和图形是什么 css 阻塞了宽度 100%。

【讨论】：

我可以理解，但组件在这种情况下是父组件。
解决问题的是设置溢出-x：隐藏；这似乎暂时有效。