How do I change the Material UI Toolbar height?

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

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.