Container e Box

Box

Viene usato come wrapper (involucro) per una serie di utility CSS che si vogliono applicare.
La prop sx permette di specificare le varie proprietà CSS:

    <Box
      sx={{
        width: 300,
        height: 300,
        backgroundColor: 'primary.dark',
        '&:hover': {
          backgroundColor: 'primary.main',
          opacity: [0.9, 0.8, 0.7],
        },
      }}
    />

Container fluid

È il classico container che conosciamo già da Bootstrap.
La proprietà maxWidth fissa la larghezza massima del container: per schermi più stretti esso si restringe in maniera fluida.

<Container maxWidth="sm">
  <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>

Container fixed

A differenza del precedente, al diminuire della grandezza dello schermo il container si ridimensiona a scatti fissati dai breakpoint:

<Container fixed>
  <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>