ReactJS Material-UI：当使用 <toolbar variant="dense"/> 时，theme.mixins.toolbar 偏移不适应

Question

我正在寻找一种干净的方法来调整 Material-UI AppBar 后面的内容的偏移量。

我认为 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这是（来自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,
      },
    },

以下是组件的相关样式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,
  },

您可以在此处看到密集工具栏的样式不利用 mixin。使用密集时，偏移所需的唯一样式Toolbar是minHeight: 48。如果您想在主题中管理此偏移量，您可以创建自己的 mixin （例如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>
  );
}