How do I change the Material UI Toolbar height? - material-ui

Question

I am new to React and Material UI. I am struggling with how much vertical space the components take up. One thing I would like to do is decrease the height of the toolbar.
I have tried specifying the style:
<Toolbar style={{ height: '36px' }}>
I have also tried doing it this way:
const styles = {
root: {
height: 36,
}
};
<Toolbar className={classes.root} >
but neither works. Is there a different way to do this?

Answer 1

I tried changing the Toolbar height before too but it didn't work.
I end up just setting Toolbar variant to dense which still give me a shorter height Toolbar compared to the regular one.
<Toolbar variant="dense">

Answer 2

You need to change the min-height to adjust the height, as min-height is specified in material-ui.css as 64px.
const styles = {
customizeToolbar: {
minHeight: 36
}
};
<Toolbar className={classes.customizeToolbar} >
Hope this will help you.

Answer 3

To change height of Toolbar globally, configure this in MUI theme:
const theme = createTheme({
components: {
MuiToolbar: {
styleOverrides: {
dense: {
height: 32,
minHeight: 32
}
}
}
},
})
Then use this theme:
<ThemeProvider theme={theme}>
...
</ThemeProvider>
This way you can tune look of many Mui components in theme, and this will be applied for all elements in the <ThemeProvider/> react block.
No css tweaks for individual elements, rather do it correctly in one place by modifying theme.

Answer 4

It is because the default height is 64px.
To change the height you have to actually change the minHeight property.
To do that, I have used inline styling but it works with other methods too.
const toolbarStyle = {
minHeight: '80px',
};
Then in your component simply specify the stylename using style attribute
<Toolbar style={toolbarStyle}>
Hope this helps!!

Answer 5

i too run into a similar issue after some time i put the
min height in AppBar instead of tool bar and it worked here is my code.
return (
<AppBar position="static" sx={{ height: '70px' }} >
<Container >
<Toolbar disableGutters >
</Toolbar>
</Container>
</AppBar>
)
}

Answer 6

Assign minHeight value:
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
toolbar: {
minHeight: '10px',
backgroundColor: 'IndianRed'
}
}));
const classes = useStyles();
Simply specify className in your component:
<Toolbar className={classes.toolbar}>

Answer 7

I had buttons in my toolbar with default margin. That was preventing the Toolbar to get a height of less than 64px. After setting the button margins to 0 the problem was solved for me.