如何使用MUI5断点指定方向

Question

我正在迁移到MUI5，之前我的目标是横向，如下所示：

@media screen and (orientation:landscape)

现在我想通过sx属性使用MUI5断点。我没有看到任何关于如何实现这一点的文档。

如下所示：

top: { sm: "30%", "sm and (orientation:landscape)": "10px" },

显然不起作用

Answer 1

您可以在sx中使用如下字符串形式的媒体查询：

<Box sx={{
      top: {
         sm: "30%",
      },
      "@media screen and (orientation: landscape)": {
         top: {
           sm: "10px",
         }
      }
    }}
/>