how to use container in react mui 5

how to use container in react mui 5

updated 01/05/23 By frontendshape

In this tutorial, we will see container component in react with material ui (mui 5). We will see mui 5 fluid  container sizes, container fixed example with react material UI 5.

Install & Setup Vite + React + Typescript + MUI 5


React Material UI 5 Container Example

 1. react mui 5 simple deafult container using react-mui Container component.

import { Container } from "@mui/material";

export default function SimpleContainer() {
  return (
    <>
      <Container sx={{ bgcolor: "#cfe8fc", p: "20px" }}>
        Default Container
      </Container>
    </>
  );
}
react mui 5 default container

react mui 5 default container

2. react mui 5 fluid container. A fluid container width is bounded by the maxWidth prop value like sm, xs, lg, md.

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';

export default function SimpleContainer() {
  return (
    <>
      <CssBaseline />
      <Container maxWidth="sm">
        <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
      </Container>
    </>
  );
}
react mui 5 fluid container

react mui 5 fluid container

3. react mui 5 fixed container.

import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";

export default function FixedContainer() {
  return (
    <>
      <CssBaseline />
      <Container fixed>
        <Box sx={{ bgcolor: "#cfe8fc", height: "100vh" }} />
      </Container>
    </>
  );
}
react mui 5 fixed container

react mui 5 fixed container