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

Posted 2023-03-06

【中文标题】MUI - 如何响应地获取 theme.mixins.toolbar.minHeight 值？

【英文标题】：MUI - How to get theme.mixins.toolbar.minHeight value responsively?

【发布时间】：2021-12-13 08:39:06

【问题描述】：

不知怎么用mui的theme.mixins.toolbar计算height: calc(100vh - toolbar)？

我目前正在尝试做

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


export default SwipeCard;

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

【参考方案1】：

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