ReactJS Material-UI : theme. mixins.toolbar offset 在使用 时不适应

Question

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

我认为 theme.mixins.toolbar 会自动适应，但事实并非如此。

(使用这里描述的主题密度 Prop => 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 上的属性(property).

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