ReactJS Material-UI : theme.mixins.toolbar offset is not adapting when <toolbar variant="dense"/> is used

Question

I'm searching for the clean way to adapt the offset of the content behind the Material-UI AppBar.

I assumed that theme.mixins.toolbar would adapt automatically but it's not the case.

(Using theme density prop as described here => https://material-ui.com/customization/density/ is not working neither)

export default props => {
    const classes = useStyles();

    return (
        <>
            <AppBar position="fixed" >
                <Toolbar variant="dense">
                    <IconButton edge="start" className={classes.menuButton} aria-label="menu">
                        <MenuIcon color="secondary"/>
                    </IconButton>
                    <Typography variant="h7" className={classes.title}>
                        My Title
                    </Typography>
                </Toolbar>
            </AppBar>
            <div className={classes.offset} />
            <Container >
                {props.children}
            </Container>
        </>
    );
}


const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
    offset: theme.mixins.toolbar
}));

Answer 1

theme.mixins.toolbar doesn't have any way of knowing that you are using the dense property on the Toolbar.

Here is the definition of theme.mixins.toolbar (from https://github.com/mui-org/material-ui/blob/v4.9.5/packages/material-ui/src/styles/createMixins.js#L32):

    toolbar: {
      minHeight: 56,
      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
        minHeight: 48,
      },
      [breakpoints.up('sm')]: {
        minHeight: 64,
      },
    },

Here are the relevant styles from the Toolbar component (https://github.com/mui-org/material-ui/blob/v4.9.5/packages/material-ui/src/Toolbar/Toolbar.js#L25):

  /* Styles applied to the root element if `variant="regular"`. */
  regular: theme.mixins.toolbar,
  /* Styles applied to the root element if `variant="dense"`. */
  dense: {
    minHeight: 48,
  },

You can see here that the styles for a dense toolbar do not leverage the mixins. The only style you need for your offset when using a dense Toolbar is minHeight: 48. If you want to manage this offset in your theme, you can create your own mixin (e.g. theme.mixins.denseToolbar) as in the example below:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
import {
  makeStyles,
  ThemeProvider,
  createMuiTheme
} from "@material-ui/core/styles";

const theme = createMuiTheme({
  mixins: {
    denseToolbar: {
      minHeight: 48
    }
  }
});

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  menuButton: {
    marginRight: theme.spacing(2)
  },
  title: {
    flexGrow: 1
  },
  offset: theme.mixins.denseToolbar
}));

const MyContainerWithAppBar = props => {
  const classes = useStyles();
  return (
    <>
      <AppBar position="fixed">
        <Toolbar variant="dense">
          <IconButton
            edge="start"
            className={classes.menuButton}
            aria-label="menu"
          >
            <MenuIcon color="secondary" />
          </IconButton>
          <Typography variant="h7" className={classes.title}>
            My Title
          </Typography>
        </Toolbar>
      </AppBar>
      <div className={classes.offset} />
      <Container>{props.children}</Container>
    </>
  );
};
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyContainerWithAppBar>
        <h1>My Content</h1>
      </MyContainerWithAppBar>
    </ThemeProvider>
  );
}