材料UI自定义断裂点不起作用

Question

我使用 Material UI 为我的媒体查询提供的默认断点，然后添加了一个断点（移动设备：400），所有其他断点都工作正常，除了当我达到 400px 的宽度时，更改不会生效点，我在这里做错了什么吗？

const theme = createTheme({
 breakpoints: {
      values: {
        xs: 0,
        mobile: 400,
        sm: 600,
        md: 900,
        lg: 1200,
        xl: 1536,
      },
    },

在下面，当屏幕达到 600px 宽度时，MQsm 值变为 'true' ，但是当我达到 400px 宽度时，MQmb 不会改变。

const Navbar = (props) => {
  const cartQuantity = useSelector((state) => state.cart.totalQuantity);
  const classes = useStyles();
  const theme = useTheme();
  const MQsm = useMediaQuery(theme.breakpoints.down("sm")); //600px
  const MQmb = useMediaQuery(theme.breakpoints.down("mobile")); //360px
  console.log(MQsm);
  console.log(MQmb);