如何降低 Material Toolbar 高度 Material-UI？答案

【问题标题】：How to reduce Material Toolbar height Material-UI?如何降低 Material Toolbar 高度 Material-UI？
【发布时间】：2021-01-31 16:47:21
【问题描述】：

我想从 Material-UI 更改（减少）工具栏的默认高度

我已经推荐了How do I change the Material UI Toolbar height? 我仍然面临问题

问题是当我增加到超过 50 时，我可以看到变化。但是当我想降低高度时，我无法做到。

我怎样才能做到这一点？

我的代码：

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  minHeight: {
    minHeight: "20px !important",
  },
}));

const AppHeader = () => {
  const toolbarSt = useStyles();
  return (
    <>
      <AppBar position="static">
        <Toolbar
          className={toolbarSt.minHeight}
          classes={{ regular: toolbarSt.regular, root: toolbarSt.root }}
        >
          <Typography> Home </Typography> 
          <Typography> About </Typography> 
        </Toolbar>
      </AppBar>
    </>
  );
};

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这是由于<Typography> Home </Typography> 的字体大小和 <Typography> About </Typography>
例如，如果您将样式类添加到两个排版中，如下所示：

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  minHeight: {
    minHeight: "5px !important",
  },
smallTypo:{
fontSize:"5px"
}
}));

const AppHeader = () => {
  const toolbarSt = useStyles();
  return (
    <>
      <AppBar position="static">
        <Toolbar
          className={toolbarSt.minHeight}
          classes={{ regular: toolbarSt.regular, root: toolbarSt.root }}
        >
          <Typography className={toolbarSt.smallTypo}> Home </Typography> 
          <Typography className={toolbarSt.smallTypo}> About </Typography> 
        </Toolbar>
      </AppBar>
    </>
  );
};

您可以制作一个非常小的 AppBar。这里是codeSandeBox

【讨论】：

【解决方案2】：

您应该将minHeight 属性设置为根元素

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    minHeight: "20px"
  }
}));

const AppHeader = () => {
  const toolbarSt = useStyles();
  return (
    <>
      <AppBar position="static">
        <Toolbar classes={{ root: toolbarSt.root }}>
          <Typography> Home </Typography>
          <Typography> About </Typography>
        </Toolbar>
      </AppBar>
    </>
  );
};

更多信息请参考文档https://material-ui.com/api/toolbar/#toolbar-api

【讨论】：

实际上我试过这个，我粘贴的代码是我困惑的时候。我几乎尝试了所有方法。

【解决方案3】：

只是将 sx={{ height : '70px }} 放在 appbar 中，由于某种原因它在工具栏中不起作用，但在 appbar 上起作用

return (
    <AppBar position="static" sx={{ height: '70px' }} >
      <Container >
        <Toolbar disableGutters >
        </Toolbar>
      </Container>
    </AppBar>
  );
};

【讨论】：