我试图建立一个React Jmeter 板与MUI。它与AppBar和抽屉和内容区域是一个框(请纠正任何错误的框与指定的规格是一个完美的方法)。
但我面临的问题是,我不能使容器占位符,这是框本身伸展其高度的网页的全部高度。
这是我的tsx
export default function RootContainer() {
const [open, setOpen] = React.useState(false);
const title="Manage Recipes";
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
justifyContent: 'flex-end',
}));
const drawerWidth = 240;
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
open?: boolean;
}>(({ theme, open }) => ({
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: `-${drawerWidth}px`,
...(open && {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
}),
}));
return (
<Box sx={{ display: 'flex', bgcolor:"silver",height:"100vh" }}>
<CssBaseline />
<AppBar open={open} onDrawerOpen={handleDrawerOpen} />
<Drawer open={open} onDrawerClose={handleDrawerClose} />
<Main open={open} >
<DrawerHeader />
<Container maxWidth="xl">
<h2>{title}</h2>
<Paper elevation={1} sx={{bgcolor:"#f7f9ff", height:"100%"}}>
<ManageRecipe />
</Paper>
</Container>
</Main>
</Box>
);
}
我怎样才能达到全高(而不是全宽)
*****根据答案更新
根据答案,我已经更新了页面,父级现在工作正常。它可以伸展到全尺寸,没有滚动。
但是这两个子元素造成了一些麻烦,因为它仍然不是完整的高度。
所以我像这样更新了子容器
<Container maxWidth="xl" sx={{margin:"20", bgcolor:"red", height:1}} >
<h2>{title}</h2>
<Paper elevation={1} sx={{bgcolor:"#f7f9ff", height:1/2}}>
<ManageRecipe />
</Paper>
</Container>
现在它看起来像是子容器像这样从父容器中流出,我希望容器保持在父容器中,底部填充为20px。但是它没有...请帮助
1条答案
按热度按时间shyt4zoc1#
在全局
index.css
中,使用以下样式使父节点在y轴上拉伸:body: { height: 100vh; }
除了
默认情况下,
react-apps
中的flex-direction
为row
,因此请将您的Box样式更新为: