Javascript 如何将'；印刷术'；组成部分

我曾尝试使用flexbox

调整内容

将其居中，但没有成功 然后我尝试用一个

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>
  );
}}```

从“@material ui/core”导入{AppBar、缩放、工具栏、排版、CssBaseline、UseCrollTrigger、Fab、makeStyles、IconButton、容器}
从“道具类型”导入道具类型；
从“@material ui/icons/KeyboardArrowUp”导入键盘箭头图标；
从“./menu.module.css”导入样式
从“@material ui/icons/Menu”导入菜单图标
const useStyles=makeStyles（主题=>({
根目录：{
位置：“固定”，
底部：主题。间距（2），
右：主题。间距（2）
}
}));
功能滚动顶（道具）{
const{children，window}=props；
const classes=useStyles（）；
//请注意，通常不需要将窗口引用设置为UseCollTrigger
//将默认为窗口。
//之所以在这里设置此选项，是因为演示位于iframe中。
常量触发器=使用滚动触发器({
目标：窗口？窗口（）：未定义，
是的，
阈值：100
});
const handleClick=事件=>{
常量锚点=（event.target.ownerDocument | | document）。查询选择器(
“#返回顶部锚定”
);
如果（锚定）{
scrollIntoView（{行为：“平滑”，块：“中心”}）；
}
};
返回(
{儿童}
);
}
//ScrollTop.propTypes={
//子项：PropTypes.element.isRequired，
//   /**
//*由文档注入以在iframe中工作。
//*您的项目不需要它。
//    */
//窗口：PropTypes.func
// };
导出默认函数BackToTop（道具）{
返回(
信息
);
}}```

问题可能是

工具栏

的子项没有居中。你可以这样做

const useStyles=makeStyles（主题=>({
根目录：{
位置：“固定”，
底部：主题。间距（2），
右：主题。间距（2）
},
工具栏：{
显示：“flex”，
辩护内容：“中心”，
对齐项目：“中心”，
}
}));

并使用它

信息

要确保排版始终居中，可以使用组件将其包裹起来。因为容器总是以它的子容器为中心，所以排版将以它的子容器为中心。像这样

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

信息

AppBar的
排版
，但我只希望
排版
元素居中，而不是图标可以有人投票给这个答案吗？因为它似乎很有用