ReactJS Material-UI : le décalage de theme.mixins.toolbar ne s'adapte pas lorsque <toolbar variant="dense"/> est utilisé

Question

Je cherche le moyen propre d'adapter le décalage du contenu derrière l'AppBar Material-UI.

J'ai supposé que theme.mixins.toolbar s'adapterait automatiquement mais ce n'est pas le cas.

(L'utilisation de la propriété de densité du thème comme décrit ici => https://material-ui.com/customization/density/ ne fonctionne pas non plus)

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

    return (
        <>

                        Mon Titre

Answer 1

theme.mixins.toolbar ne sait pas que vous utilisez la propriété dense sur la Toolbar.

Voici la définition de theme.mixins.toolbar (de 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,
      },
    },

Voici les styles pertinents du composant Toolbar (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,
  },

Ici, on peut voir que les styles pour une barre d'outils dense n'utilisent pas les mixins. Le seul style dont vous avez besoin pour votre décalage lorsque vous utilisez une Toolbar dense est minHeight: 48. Si vous voulez gérer ce décalage dans votre thème, vous pouvez créer votre propre mixin (par exemple theme.mixins.denseToolbar) comme dans l'exemple ci-dessous:

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

            My Title