javascript - Material UI - How to stretch Grid container to parent height and width - Stack Overflow

admin管理员组

文章数量:1416529

Problem

I cannot work how to get a Grid container element to stretch to the height and width of it's parent element without modifying the height and width using the style prop or editing the style with the makeStyles/useStyles hook.

I am sure there has to be a simpler way. I have created a sandbox with what I would like (written with vanilla React) and what I have so far (written with Material UI ponents).

The reason I am not just using regular Box ponents is due to of the lack responsive controls it has in parison to Grid.

Example

Codesandbox

Problem

I cannot work how to get a Grid container element to stretch to the height and width of it's parent element without modifying the height and width using the style prop or editing the style with the makeStyles/useStyles hook.

I am sure there has to be a simpler way. I have created a sandbox with what I would like (written with vanilla React) and what I have so far (written with Material UI ponents).

The reason I am not just using regular Box ponents is due to of the lack responsive controls it has in parison to Grid.

Example

Codesandbox

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow asked Aug 11, 2020 at 7:16 Alex MckayAlex Mckay 3,7061919 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I was overplicating things and under appreciating the power of Box.

Box is responsive. My takeaway is to use Grid sparingly on items that have heights and widths and use Box in bination with the Hidden for screen layouts.

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>
  );
}

本文标签： javascriptMaterial UIHow to stretch Grid container to parent height and widthStack Overflow