如何解决材质用户界面-如何将Grid容器拉伸到父级的高度和宽度
问题
在不使用Grid
道具修改高度和宽度或使用{{编辑样式的情况下,如何使style
容器元素延伸到其父元素的高度和宽度,我无法工作1}}钩子。
我确信必须有一个更简单的方法。我已经创建了一个沙箱,其中包含我想要的内容(使用Vanilla React编写)以及到目前为止的内容(使用Material UI组件编写)。
我之所以不使用常规的makeStyles/useStyles
组件,是因为与Box
相比,它缺乏响应式控件。
示例
解决方法
我太过复杂了,对Box
的功能却一无所知。
Box
响应迅速。我的收获是,在具有高度和宽度的项目上尽量少使用Grid
,并结合使用Box
和Hidden
进行屏幕布局。
import React from "react";
import { Box } from "@material-ui/core";
export default function Layout() {
return (
<Box bgcolor="green" display="flex" height="100vh" width="100vw">
<Box bgcolor="red" flex={{ xs: 1,sm: 2 }} />
<Box
bgcolor="yellow"
display="flex"
flex={1}
flexDirection={{ xs: "column",sm: "row" }}
>
<Box bgcolor="blue" flex={{ xs: 1,sm: 6 }} />
<Box bgcolor="purple" flex={{ xs: 11,sm: 6 }} />
</Box>
</Box>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。