How do I change the Material UI Toolbar height?

问题

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?

回答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.

回答2:

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

回答3:

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

回答4:

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}>
```

来源：https://stackoverflow.com/questions/55344569/how-do-i-change-the-material-ui-toolbar-height

标签

material-ui