javascript - MUI - 如何响应地获取 theme.mixins.toolbar.minHeight 值？

Question

不知怎么用mui的theme.mixins.toolbar计算 height: calc(100vh - toolbar) ?
我目前正在尝试做

function SwipeCard() {
  return (
    <Box
      sx={{
        height: (theme) => `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
        paddingTop: (theme) => theme.mixins.toolbar.minHeight + "px",
      }}
    >
      hello world
    </Box>
  );
}

export default SwipeCard;

但是当我改变视口(viewport)大小并且工具栏变得更大时。 Theme.mixins.toolbar.minHeight 56 保持不变而不是预期的64 ?

Answer 1

所以我发现你可以添加第二个空的 Toolbar如果您的 main Toolbar position is fixed 用作您的内容的填充.它自动带有相同的media queries作为主要Toolbar .