ReactJS Material-UI: смещение theme.mixins.toolbar не адаптируется, когда используется

Question

Я ищу чистый способ адаптации смещения содержимого за панелью приложений Material-UI.

Я предполагал, что theme.mixins.toolbar адаптируется автоматически, но это не так.

(Использование пропи плотности темы, как описано здесь => https://material-ui.com/customization/density/ также не работает)

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 не может знать, что вы используете свойство dense в Toolbar.

. Вот определение theme.mixins.toolbar (из * 1008). *):

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

Вот соответствующие стили из компонента 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,
  },

Вы можете увидеть здесь, что стили для плотной панели инструментов не используют миксины. Единственный стиль, который вам нужен для смещения при использовании плотного Toolbar, это minHeight: 48. Если вы хотите управлять этим смещением в своей теме, вы можете создать свой собственный миксин (например, theme.mixins.denseToolbar), как в примере ниже:

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