我怎样才能使“排版”组件居中？

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 总是将其子元素居中，因此排版将居中。像这样

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