如何使用 MUI/ReactJS 定义支持的最小屏幕尺寸？

Question

我在需要大视口的网络应用程序中使用 Material UI 5.6。我想为整个应用程序定义一个最小屏幕宽度，这样：

这可以用 MUI 实现，还是我需要另一个库？

Answer 1

第一个要求可以通过样式和 media-queries 实现，也可以通过 plain CSS or with MUI-specific styling tools 实现。

第二个要求可以通过 useMediaQuery hook 以多种方式实现：

限制使用不受支持设备的用户使用该应用程序

您可以将整个应用包装在一个 wrapper-component 中，您可以在其中定义所需的 min-width

  const requiredWidth = useMediaQuery("(min-width:1024px)");

然后您可以 return UI 您的应用程序或屏幕显示不支持该设备的消息：

  return requiredWidth ? (
    { children }
  ) : (
    <p>We do not fully support your device </p>
  );

在这种情况下，用户将无法使用整个应用程序。

显示警报

另一种选择是使用相同的包装器组件并呈现一个 Alert or Snackbar，它将与您应用程序的 UI 的其余部分一起呈现：

  return (
    <>
      {children}
      {requiredWidth && <AlertComponent />}
    </>
  );

在这种情况下，用户将收到有关其设备的通知，但仍可以使用该应用。

How to define minimum supported screen size with MUI/ReactJS?