MUI自定义断点失效求助：组件gap未按屏幕尺寸预期变化

错误原因 #

你误用了theme.breakpoints.between("lg", "xxl")方法——它返回的是媒体查询字符串（比如"(min-width:1200px) and (max-width:2159px)"），而非布尔值。在JavaScript的三元判断中，非空字符串会被视为true，所以不管屏幕尺寸如何，都会执行"4rem"的分支，导致gap始终为4rem。

正确解决方案 #

方案1：使用useMediaQuery钩子判断屏幕区间

通过useMediaQuery将媒体查询字符串转换为布尔值，再传递给样式：

import { useMediaQuery, useTheme, styled, Box } from '@mui/material';

// 在组件内部
const theme = useTheme();
const isBetweenLgAndXxl = useMediaQuery(theme.breakpoints.between("lg", "xxl"));

const InnerNavBox = styled(Box)(() => ({
  justifyContent: "space-between",
  alignItems: "center",
  display: "flex",
  flexDirection: "column",
  gap: isBetweenLgAndXxl ? "4rem" : "2rem",
}));

方案2：直接在样式中嵌套媒体查询（推荐）

这是MUI官方推荐的响应式样式写法，无需额外钩子，直接在样式对象中定义断点对应的样式：

import { styled, Box } from '@mui/material';

const InnerNavBox = styled(Box)(({ theme }) => ({
  justifyContent: "space-between",
  alignItems: "center",
  display: "flex",
  flexDirection: "column",
  gap: "2rem", // 默认小屏幕值
  // 当屏幕处于lg到xxl区间时覆盖gap值
  [theme.breakpoints.between("lg", "xxl")]: {
    gap: "4rem"
  }
}));

这种写法更符合MUI的样式封装逻辑，也避免了额外的状态判断，代码更简洁易维护。

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