在Material UI Next(ReactJS)中添加自定义断点出现NaN错误

云上老周

2026-5-22

解决Material UI自定义断点down('xxs')出现NaN的问题

嘿，我来帮你搞定这个NaN的问题！你遇到的@media (max-width:NaNpx)情况，其实是Material UI的breakpoints.down()方法的设计逻辑导致的。

问题原因

breakpoints.down(key)的作用是生成匹配小于该断点宽度的媒体查询，它的计算规则是取目标断点的value减去0.05（用来避免和相邻断点的临界值重叠）。但你的xxs断点设置的value是0，0减0.05得到负数，这在CSS媒体查询里是无效的，所以最终就输出了NaN。

解决方案

这里给你几个实用的解决办法：

最贴合需求的方案：使用breakpoints.only('xxs')
如果你想匹配xxs对应的范围（0px到413px，也就是iPhone X及以下竖屏的宽度），直接用only()方法就对了，它会生成精准的区间媒体查询。修改后的代码如下：
```
const styles = theme => ({
  root: {
    [theme.breakpoints.only('xxs')]: {
      textAlign: "center",
      padding: theme.spacing.unit * 2,
    },
  },
})
```
这样生成的CSS会是@media (min-width:0px) and (max-width:413.95px)，完全覆盖你需要的场景。
简化方案：直接用down('xs')
如果你其实是想给所有小于414px的屏幕应用样式，那根本不需要额外定义xxs断点，直接用down('xs')就行，它会生成@media (max-width:413.95px)，效果和你原本期望的xxs范围完全一致。
调整断点值（不推荐）
如果你非要用down('xxs')，可以把xxs的value改成1，这样down('xxs')会生成@media (max-width:0.95px)，但这个范围几乎没有实际意义，所以还是前面两个方案更靠谱。