How does one use or get started with ...theme.mixins.toolbar in Material-ui?

Question

I cannot find any documentation for ...theme.mixins.toolbar in the material-ui docs. What does this do? How do I change or use it?

Answer 1

It simply adds a minimum height to an element. It's useful when you use the AppBar with a content section below, and you want to add a spacer at the top of your content so it doesn't disappear under the AppBar, for example.

I can't find specific documentation on it, but there are examples of it being used in the Material-UI layout examples and I believe it might be created by this function.

More specifically, it's used in the Dashboard example:

toolbarIcon: {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-end',
  padding: '0 8px',
  ...theme.mixins.toolbar,
},

This would result in something like:

toolbarIcon: {
  display: flex;
  align-items: center;
  justifyContent: flex-end;
  padding: 0 8px;
  min-height: 64px;
}

Answer 2

There is global default theme. Specifically the theme.mixin.toolbar property on the object adds a min height.

theme:
 breakpoints: Object
  direction: "ltr"
 mixins: Object
  gutters: f gutters()
  toolbar: Object
   minHeight: 56
   @media (min-width:0px) and (orientation: landscape): Object
   @media (min-width:600px): Object

From the site:

Tip: you can play with the documentation theme object in your console, as the theme variable is exposed on all the documentation pages. Please note that the documentation site is using a custom theme.

If you want to learn more about how the theme is assembled, take a look at material-ui/style/createMuiTheme.js, and the related imports which createMuiTheme uses.

Here is the documentation