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

Question

我想知道如何使用 muitheme.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;

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

Answer 1

所以我发现Toolbar如果您的main Toolbar position is fixed. 它自动带有与media queriesmain相同的内容Toolbar。