typescript 使子元素填充到父容器React MUI的高度

djmepvbi  于 2022-12-19  发布在  TypeScript
关注(0)|答案(1)|浏览(118)

我试图建立一个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。但是它没有...请帮助

shyt4zoc

shyt4zoc1#

在全局index.css中,使用以下样式使父节点在y轴上拉伸:
body: { height: 100vh; }

html,
#root,
.App {
  height: 100%;
}

除了

默认情况下,react-apps中的flex-directionrow,因此请将您的Box样式更新为:

<Box
  sx={{
    display: 'flex',
    flexDirection: 'column',
    bgcolor: 'silver',
    height: '100%', // <---here
  }}
>
  {/** ... */}
</Box>

相关问题