ReactJS材质UI:theme.mixins.toolbar偏移量在<；时不适应；工具栏变量="；密集的/&燃气轮机；使用

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

我假设theme.mixins.toolbar会自动适应，但事实并非如此

（使用此处描述的主题密度道具=>也不起作用）

导出默认道具=>{
const classes=useStyles（）；
返回(
我的头衔
{props.children}
);
}
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
标题：{
flexGrow:1，
},
偏移量：theme.mixins.toolbar
}));

主题.混合.工具栏

无法知道您正在使用

工具栏

上的

密集

属性

以下是

主题.mixins.toolbar

（from）的定义：

以下是

工具栏
组件（）中的相关样式：

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

从“React”导入React；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Container”导入容器；
进口{
制作风格，
提供者，
创造博物馆
}来自“@material ui/core/styles”；
const theme=createMuiTheme({
混合：{
denseToolbar：{
身高：48
}
}
});
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1
},
菜单按钮：{
边缘光：主题。间距（2）
},
标题：{
flexGrow:1
},
偏移量：theme.mixins.denseToolbar
}));
常量MyContainerWithAppBar=props=>{
const classes=useStyles（）；
返回(
非常感谢您的回答@Ryan，因此有没有一种干净的方法来调整密集版工具栏的偏移量？@CharlesdB我添加了一个这样做的示例。谢谢，这个解决方案的唯一问题是它还没有响应sm屏幕（工具栏变薄了）。我知道我可以使用withWidth或新的useMediaQuery挂钩，但我更想寻找一种标准的材质ui方式来实现它，但Thk需要帮助！@CharlesdB
dense
版本的工具栏不会因屏幕大小的不同而改变高度——它总是48。
    toolbar: {
      minHeight: 56,
      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
        minHeight: 48,
      },
      [breakpoints.up('sm')]: {
        minHeight: 64,
      },
    },

  /* 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,
  },

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