如何简便使用MUI的breakpoints实现响应式开发？

不用啃官方文档里繁琐的const styles写法，下面是日常开发用得最多、上手零门槛的实现方式：

首推方案：直接在sx属性里写断点样式（90%场景够用） #

MUI v5及以上版本的sx属性原生支持断点作为配置键，不需要单独定义样式常量、不需要手写媒体查询，直接和组件写在一起，改样式不用来回跳文件。

import { Card, CardContent, Typography } from '@mui/material';

export default function ResponsiveCard() {
  return (
    <Card
      sx={{
        // 默认样式：xs断点（0px起，手机竖屏）生效
        width: '100%',
        p: 2,
        boxShadow: 1,
        // sm断点（600px起，平板/大手机横屏）覆盖对应样式
        sm: {
          width: '90%',
          p: 3,
          boxShadow: 2
        },
        // md断点（900px起，笔记本屏幕）覆盖对应样式
        md: {
          width: 720,
          p: 4,
          boxShadow: 3
        },
        // lg断点（1200px起，桌面显示器）覆盖对应样式
        lg: {
          width: 800,
          p: 5
        }
      }}
    >
      <CardContent>
        <Typography variant="h5" sx={{ fontSize: 16, sm: { fontSize: 20 }, md: { fontSize: 24 } }}>
          响应式标题
        </Typography>
        响应式卡片内容
      </CardContent>
    </Card>
  )
}

这个写法不需要记任何额外API，会写普通sx样式就能写响应式，新手零学习成本

MUI默认断点速查表 #

不用自己额外配置，直接用下面的断点值就行，覆盖绝大多数设备场景：

• xs: 0px 及以上，超小屏/手机竖屏
• sm: 600px 及以上，平板/手机横屏
• md: 900px 及以上，13/14寸笔记本
• lg: 1200px 及以上，常规桌面显示器
• xl: 1536px 及以上，大屏桌面/带鱼屏

条件渲染场景：用useMediaQuery钩子判断屏幕尺寸 #

如果需要根据屏幕尺寸决定组件显隐、切换组件逻辑，不用手写原生matchMedia，直接用MUI封装的钩子就行：

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

export default function ResponsiveContent() {
  const theme = useTheme();
  // 判断当前屏幕是否达到md及以上尺寸
  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));

  return (
    <Box>
      <p>全尺寸屏幕都显示的公共内容</p>
      {isDesktop && (
        <p>*这段内容只有屏幕宽度≥900px时才会渲染，移动端自动隐藏*</p>
      )}
    </Box>
  )
}

小提示：theme.breakpoints.up('sm') 等价于原生媒体查询 @media (min-width: 600px)，theme.breakpoints.down('md') 等价于 @media (max-width: 899.5px)，不需要自己手动算临界像素值。

新手避坑 #

• 官方文档里提到的makeStyles、const styles = theme => ({...})是MUI v4版本的遗留写法，v5之后的版本不需要学这套，优先用sx写响应式效率高很多
• MUI断点是移动端优先逻辑：最外层写的是最小屏默认样式，屏幕宽度达到对应断点阈值后，会自动覆盖对应断点下的属性，不要把大小屏的样式顺序写反
• 初期开发完全不用自定义断点配置，默认的断点阈值已经适配绝大多数设备，等熟悉用法之后再根据项目需求调整即可

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