How to reduce Material Toolbar height Material-UI? - reactjs

Question

I want to change(reduce) the default height of the toolbar from Material-UI
I already referred How do I change the Material UI Toolbar height? still I'm facing the problem
The thing is when I am increasing beyond like 50 , I can see changes. But when I want to decrease the height I am unable to.
How can I achieve this?
My Code :
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

This is due to the font size of <Typography> Home </Typography> and
<Typography> About </Typography> for exemple if you add style class to both Typography like this:
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>
</>
);
};
you can make a really small AppBar.
here a codeSandeBox

Answer 2

You should set the minHeight property to the root element
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>
</>
);
};
Please refer to the docs for more information https://material-ui.com/api/toolbar/#toolbar-api

Answer 3

just put sx={{ height : '70px }} in appbar for some reason it is not working in toolbar but works on appbar
return (
<AppBar position="static" sx={{ height: '70px' }} >
<Container >
<Toolbar disableGutters >
</Toolbar>
</Container>
</AppBar>
);
};