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