我想从Material-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>
</>
);
};
这是由于的字体大小<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。这是一个代码SandeBox
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句