React js material ui 响应式抽屉内的问题框
React js material ui problem box inside responsive drawer
我以有关 Responsive drawer 的文档为例。
从图片中可以看出，内容在一定高度的部分取决于它的上下文。
但我希望从图像中看到的上下文背景是相同的。
我尝试使用 flex: 1 或 height: "100%" 添加到文本框，但没有任何变化。
Link: codesandbox
我该怎么办？
使其按预期工作的最简单方法是为您的盒子组件分配最大高度 viewport (height: 100vh)。
...
<Box component="main"
sx={{
flexGrow: 1,
p: 3,
width: { sm: `calc(100% - ${drawerWidth}px)` },
height: '100vh',
color: "#fff",
backgroundColor: "#212121"
}}>
<Toolbar />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</Typography>
</Box>
...
工作示例：
注意： 由于以下原因，您的解决方案将不起作用：
带有百分比值的 height 属性 将从父元素继承，因为父元素 height 默认为 auto （继承自其父元素也是），所以它不会按预期工作。flex 属性 不会按预期工作，因为默认情况下 flex-direction 将是 row。但是如果你把它改成 column 它也不会起作用，因为容器的最大高度是 auto 并且它遵循与上面相同的规则。
我以有关 Responsive drawer 的文档为例。
从图片中可以看出，内容在一定高度的部分取决于它的上下文。
但我希望从图像中看到的上下文背景是相同的。
我尝试使用 flex: 1 或 height: "100%" 添加到文本框，但没有任何变化。
Link: codesandbox
我该怎么办？
使其按预期工作的最简单方法是为您的盒子组件分配最大高度 viewport (height: 100vh)。
...
<Box component="main"
sx={{
flexGrow: 1,
p: 3,
width: { sm: `calc(100% - ${drawerWidth}px)` },
height: '100vh',
color: "#fff",
backgroundColor: "#212121"
}}>
<Toolbar />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</Typography>
</Box>
...
工作示例：
注意： 由于以下原因，您的解决方案将不起作用：
-
带有百分比值的
height属性 将从父元素继承，因为父元素height默认为auto（继承自其父元素也是），所以它不会按预期工作。flex属性 不会按预期工作，因为默认情况下flex-direction将是row。但是如果你把它改成column它也不会起作用，因为容器的最大高度是auto并且它遵循与上面相同的规则。