CODEWITHSUNDEEP
material-ui
sweetpea
sweetpea

Reputation: 391

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?

Upvotes: 22

Views: 49460

Answers (10)

user22954028
user22954028

Reputation: 11

Change the min-height in this way:

<Toolbar
   sx={{
      '@media (min-width: 600px)': {
         minHeight: '60px',
      },
   }}
/>

Upvotes: 1

Piko
Piko

Reputation: 1

Try adjusting the AppBar's 'top' Css property. Like so:

<AppBar  sx={{ top: -10}}> </AppBar>

This solved it for me.

Upvotes: -2

Elcio Thomaz Rosa
Elcio Thomaz Rosa

Reputation: 71

The cleanest way I could get was

<Toolbar variant='dense' disableGutters sx={{ minHeight: 20, height: 20 }}>

Upvotes: 7

Rono Koushique
Rono Koushique

Reputation: 11

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.

Upvotes: 0

Pointer Null
Pointer Null

Reputation: 40380

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.

Upvotes: 8

hem charan
hem charan

Reputation: 126

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

Upvotes: 1

mernDev
mernDev

Reputation: 1

  1. Assign minHeight value:

    const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  toolbar: {
    minHeight: '10px',
    backgroundColor: 'IndianRed'
  }
}));

  2. const classes = useStyles();

  3. Simply specify className in your component:

    <Toolbar className={classes.toolbar}>

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

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.

Upvotes: 18

Gowtham Karnan
Gowtham Karnan

Reputation: 91

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

Upvotes: 2

will92
will92

Reputation: 1044

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

Upvotes: 28

Related Questions