Как я могу центрировать компонент «Типографика»?

Question

Я попытался центрировать его с помощью flexbox justify-content, но это не сработало. Затем я попытался заменить компонент Typography тегом div, но это не сработало

import {AppBar,Zoom,Toolbar,Typography,CssBaseline,useScrollTrigger,Fab,makeStyles,IconButton,Container } from '@material-ui/core'
import PropTypes from 'prop-types';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import styles from './menu.module.css'
import MenuIcon from '@material-ui/icons/Menu'


const useStyles = makeStyles(theme => ({
  root: {
    position: "fixed",
    bottom: theme.spacing(2),
    right: theme.spacing(2)
  }
}));

function ScrollTop(props) {
  const { children, window } = props;
  const classes = useStyles();
  // Note that you normally won't need to set the window ref as useScrollTrigger
  // will default to window.
  // This is only being set here because the demo is in an iframe.
  const trigger = useScrollTrigger({
    target: window ? window() : undefined,
    disableHysteresis: true,
    threshold: 100
  });

  const handleClick = event => {
    const anchor = (event.target.ownerDocument || document).querySelector(
      "#back-to-top-anchor"
    );

    if (anchor) {
      anchor.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  };

  return (
    <Zoom in={trigger}>
      <div onClick={handleClick} role="presentation" className={classes.root}>
        {children}
      </div>
    </Zoom>
  );
}

// ScrollTop.propTypes = {
//   children: PropTypes.element.isRequired,
//   /**
//    * Injected by the documentation to work in an iframe.
//    * You won't need it on your project.
//    */
//   window: PropTypes.func
// };

export default function BackToTop(props) {
  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar>
        <Toolbar>
          <IconButton>
            <MenuIcon
              className={styles.icon}
              edge="end"
              color="inherit"
              aria-label="menu"
            />
          </IconButton>
          <Typography align='center' variant="h5">
            Información
          </Typography>
        </Toolbar>
      </AppBar>
      <Toolbar id="back-to-top-anchor" />
      <Container>
       <Typography></Typography>
      </Container>
      <ScrollTop {...props}>
        <Fab color="secondary" size="small" aria-label="scroll back to top">
          <KeyboardArrowUpIcon />
        </Fab>
      </ScrollTop>
    </React.Fragment>
  );
}}```

Answer 1

Проблема, вероятно, в том, что Toolbar не центрирует своих дочерних элементов. Вы можете сделать что-то вроде

const useStyles = makeStyles(theme => ({
    root: {
        position: "fixed",
        bottom: theme.spacing(2),
        right: theme.spacing(2)
    },
    toolBar: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    }
}));

и использовать

<Toolbar className={classes.toolBar}>
    <IconButton>
        <MenuIcon
            className={styles.icon}
            edge="end"
            color="inherit"
            aria-label="menu"
        />
    </IconButton>
    <Typography align='center' variant="h5">
        Información
    </Typography>
</Toolbar>

Answer 2

Чтобы типографика всегда была выровнена по центру, вы можете обернуть ее компонентом. Поскольку Контейнер всегда центрирует своих дочерних элементов, в результате типографика будет центрирована. Вот так

<Container>
  <Typography variant="h5">Información</Typography>
</Container>