MUI v5用断点避免布局偏移，如何解决useMediaQuery水合导致的移位问题

方案1：纯CSS响应式实现（最优，完全规避水合问题） #

不需要依赖JS媒体查询，直接通过MUI的sx属性用内置断点控制按钮宽度，所有逻辑在CSS层执行，天生不存在水合不一致导致的布局偏移问题，实现效果和你原代码的fullWidth={smDown}完全一致：

import Button from '@mui/material/Button';

function ResponsiveButton() {
  return (
    <Button 
      sx={{
        width: { xs: '100%', sm: 'auto' }
      }}
    >
      Label
    </Button>
  );
}

方案2：配置useMediaQuery服务端匹配规则 #

如果你需要在JS逻辑中复用smDown变量（除了控制fullWidth外还有其他JS逻辑需要使用该判断），可以通过配置useMediaQuery的ssrMatchMedia参数，让初始渲染就返回正确的匹配值，避免水合后二次更新导致的偏移：

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import Button from '@mui/material/Button';

function ResponsiveButton() {
  const theme = useTheme();
  const smDown = useMediaQuery(
    theme.breakpoints.down('sm'),
    {
      // 自定义服务端渲染阶段的媒体查询匹配逻辑
      ssrMatchMedia: (query) => ({
        matches: typeof window !== 'undefined' ? window.matchMedia(query).matches : false
        // 若使用Next.js等SSR框架，也可以结合请求头的UA/viewport信息判断设备尺寸，返回对应匹配值
      })
    }
  );

  return (
    <Button fullWidth={smDown}>
      Label
    </Button>
  );
}

如果项目中多处用到useMediaQuery，也可以直接在全局theme中统一配置，不需要每个调用单独传参：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiUseMediaQuery: {
      defaultProps: {
        ssrMatchMedia: (query) => ({
          matches: typeof window !== 'undefined' ? window.matchMedia(query).matches : false
        })
      }
    }
  }
});

// 根组件包裹ThemeProvider传入上述theme即可

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