Using containers

Often, when you're trying to lay out components on your page, the horizontal layout is the most difficult part to get right. The Container component from Material-UI is a simple, but powerful, layout tool. It helps to control the horizontal width of its children. Let's take a look at an example to see what's possible:

import "typeface-roboto";
import React, { Fragment } from "react";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";

export default function App() {
  const textStyle = {
    backgroundColor: "#cfe8fc",
    margin: 5,
    textAlign: "center"
  };

  return (
    <Fragment>
      <Container maxWidth="sm">
        <Typography style={textStyle}>sm</Typography>
      </Container>
      <Container maxWidth="md">
        <Typography style={textStyle}>md</Typography>
      </Container...