MUI如何响应式获取theme.mixins.toolbar.minHeight计算元素高度？

问题根因 #

你直接读取theme.mixins.toolbar.minHeight只能拿到默认移动端（xs断点）的固定值56，MUI的Toolbar响应式高度调整是通过内置的媒体查询规则实现的，并不会动态修改这个静态配置值，所以视口变大后不会自动变成64。

解决方案 #

方案1：使用flex布局自动适配（最推荐，无需手动计算高度） #

直接将Toolbar和你的内容组件放在同一个flex列布局的父容器内，让内容区域自动填充剩余高度：

// 父容器代码
function App() {
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <Toolbar /> {/* 你的顶部导航栏 */}
      <SwipeCard />
    </Box>
  )
}

// SwipeCard组件只需设置flex:1即可自动占满剩余高度
function SwipeCard() {
  return (
    <Box sx={{ flex: 1 }}>
      hello world
    </Box>
  );
}

这个方案完全适配Toolbar的所有自定义高度修改和响应式规则，不需要手动维护高度值。

方案2：按MUI断点手动写响应式高度 #

如果你确实需要用calc计算高度，可以直接对齐MUI默认断点的Toolbar高度值：

function SwipeCard() {
  return (
    <Box
      sx={{
        height: {
          xs: 'calc(100vh - 56px)', // xs断点<600px时toolbar高度56px
          sm: 'calc(100vh - 64px)' // sm断点≥600px时toolbar高度64px
        },
        paddingTop: {
          xs: '56px',
          sm: '64px'
        },
      }}
    >
      hello world
    </Box>
  );
}

如果你的主题自定义过Toolbar高度，直接替换对应值即可。

方案3：从theme中动态读取断点配置 #

如果你要适配自定义主题的Toolbar高度配置，可以直接从主题的mixins中提取对应断点的规则：

sx={{
  height: (theme) => `calc(100vh - ${theme.breakpoints.up('sm') ? theme.mixins.toolbar[theme.breakpoints.up('sm')].minHeight : theme.mixins.toolbar.minHeight}px)`
}}

这种写法适配自定义主题的Toolbar高度修改，无需硬编码数值。

内容的提问来源于stack exchange，提问作者Rolam