如何降低材质工具栏高度材质UI？

Question

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

我已经提到了如何更改材质UI工具栏高度？但我仍然面临着这个问题

问题是，当我超过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>
    </>
  );
};

Answer 1

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

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

Answer 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

Answer 3

这是由于

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。这是一个密码箱