material-ui - 如何使用 MUI5 断点指定方向

Question

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

@media screen and (orientation:landscape)

现在我想使用 MUI5 断点和 sx 道具。我没有看到任何文档如何实现这一点。

像这样的东西：

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

显然行不通

标签： material-ui

Answer 1

您可以在内部使用媒体查询sx作为字符串，如下所示：

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