How do I change the Material UI Toolbar height?
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.
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.
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">