Skip to main content

Container

An element that centers content horizontally.

http://localhost:3000
<Container>
  <Typography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  </Typography>
</Container>

Usage​

Max width​

Set the maxWidth prop to limited the maximum width the container can stretch to.

http://localhost:3000
<Container maxWidth="small">
  <Typography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  </Typography>
</Container>

Fixed​

Set the fixed prop to ensure the container's max-width matches the min-width of the current breakpoint.

http://localhost:3000
<Container fixed>
  <Typography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  </Typography>
</Container>

Props​

as?The root element to be rendered