material ui footer center example Футер по центру пример

Неплохой заменой Container с его непонятно как управляемым maxWidth:

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Link from '@material-ui/core/Link';

const useStyles = makeStyles(theme => ({
  footer: {
    padding: theme.spacing(1),
    marginTop: 'auto',
    backgroundColor: 'white',
  },
}));

export default function Footer () {
  const classes = useStyles();

  console.log(classes, 'classes2')

  return (
      <footer className={classes.footer}>
        <Container maxWidth="xs">
        <Typography variant="body2" color="textSecondary">
        {'Ваш текст футера'}
        </Typography>
        </Container>
      </footer>
    // </div>
  );
}

может стать Grid, который тоже хорошо умеет центровать собственное содержимое:

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(theme => ({
  footer: {
    padding: theme.spacing(1),
    marginTop: 'auto',
    backgroundColor: 'white',
  },
  footerContainer: {
    maxWidth: '200px',
  },
}));

export default function Footer() {
  const classes = useStyles();

  console.log(classes, 'classes2')

  return (
    <footer className={classes.footer}>
      <Grid
        container
        spacing={0}
        direction="column"
        alignItems="center"
        justify="center"
      >
        <Grid item xs={3}>
          <Typography variant="body2" color="textSecondary">
            Ваш текст футера © {new Date().getFullYear()}
          </Typography>
        </Grid>
      </Grid>
    </footer>
  );
}