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">