SINGULARITY
DOCS
Nextjs
Reference
Container
The container aligns your content horizontally at the center. It serves as a fundamental layout component.
Although containers can be nested, most layouts do not necessitate nested containers.
Fluid
The width of a fluid container is constrained by the value of the
maxWidth prop.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 (
<React.Fragment>
<CssBaseline />
<Container maxWidth="sm">
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>
</React.Fragment>
);
}<Container maxWidth="sm">
Fixed
For designs that prioritize a fixed set of sizes over a fully fluid viewport, you can apply the
fixed prop. This sets the maximum width to match the minimum width of the current breakpoint.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 (
<React.Fragment>
<CssBaseline />
<Container fixed>
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>
</React.Fragment>
);
}<Container fixed>