React js material ui 响应式抽屉内的问题框

Question

我以有关 Responsive drawer 的文档为例。

从图片中可以看出，内容在一定高度的部分取决于它的上下文。

但我希望从图像中看到的上下文背景是相同的。

我尝试使用 flex: 1 或 height: "100%" 添加到文本框，但没有任何变化。

Link: codesandbox

我该怎么办？

Answer 1

使其按预期工作的最简单方法是为您的盒子组件分配最大高度 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 并且它遵循与上面相同的规则。

React js material ui 响应式抽屉内的问题框

React js material ui problem box inside responsive drawer

javascript

reactjs

responsive-design

material-ui

drawer