How do I change the Material UI Toolbar height?

material-ui get toolbar height
material-ui/icons
material-ui grid height
material-ui drawer width
material ui get current toolbar height
material-ui dialog height
material-ui toolbar align right
material-ui toolbar color

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?

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.

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, }� Sizing. Easily make an element as wide or as tall (relative to its parent) with the width and height utilities. Supported values. The sizing style functions support different property input type:

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

Toolbar API, The API documentation of the Toolbar React component. Edit this page The MuiToolbar name can be used for providing default props or style overrides at� The height is also not easily changed because internal DOM nodes set various padding and line-height values which all need to be overridden. It's very frustrating. You can simply change this theme value https://github.com/callemall/material-ui/blob/master/src/styles/theme-manager.js#L15.

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

Sizing, Easily make an element as wide or as tall (relative to its parent) with the width and height utilities. Spacing. A wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. Notation. The space utility converts shorthand margin and padding props to margin and padding CSS declarations.

[AppBar] Get AppBar height � Issue #10739 � mui-org/material-ui , How can I get its height to set margin for the content when AppBar is absolutely positioned? Tech Version Material-UI 1.0.0-beta.37 React� The API documentation of the Toolbar React component. Learn more about the props and the CSS customization points.

SO: full-height Tabs inside of a Toolbar using material-ui , full-height Tabs inside of a Toolbar using material-ui? You need to override the root styles of Tabs and Tab components to match the height of Toolbar (defined in� App Bar. The App Bar displays information and actions relating to the current screen. The top App Bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

Making a beautiful Todo App using React Hooks + Material UI , Let's develop the Layout Our Layout component will only render a Toolbar with our App import { AppBar, Toolbar, Typography, Paper } from '@material-ui/core' ; <AppBar color="primary" position="static" style={{ height: 64 }}> that value, and also, a set of custom functions to handle change, reset, and input events. Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

Comments
  • You might need to throw px behind the 36 root: 36px or even root: '36px'
  • thanks for that thought... 36px does not compile and '36px' doesn't change the size.
  • how about adding padding?
  • @sweatpea Height is not changing because in material-ui css min-height is specified as 64px.
  • where do I find the documentation where these types of things are specified?
  • thank you. this did result in a shorter height Toolbar.