reactjs - 如何在 MUI 5 中的断点属性中访问主题？

Question

我需要使用我的 theme.spacing在我的 sm断点，但没有尝试工作。

sx={{
  paddingTop: { sm: 0 },
  paddingRight: { sm: "spacing(6)" },
  paddingBottom: { sm: "spacing(10)" },
  paddingLeft: { sm: "theme.spacing(6)" },
  "@media screen and (orientation:landscape)": {
    paddingTop: { sm: 0 },
    paddingRight: { sm: "spacing(6)" },
    paddingBottom: { sm: "spacing(2)" },
    paddingLeft: { sm: "theme.spacing(6)" },
  },
}}

或这个

sx={{
  paddingTop: { sm: 0 },
  paddingRight: { sm: (theme) =>  theme.spacing(6) },
  paddingBottom: { sm: (theme) =>  theme.spacing(10) },
  paddingLeft: { sm: (theme) =>  theme.spacing(6) },
  "@media screen and (orientation:landscape)": {
    paddingTop: { sm: 0 },
    paddingRight: { sm: (theme) =>  theme.spacing(6) },
    paddingBottom: { sm: (theme) =>  theme.spacing(2) },
    paddingLeft: { sm: (theme) =>  theme.spacing(6) },
  },
}}

如何使用带有断点的主题值( sm 、 md 、 lg 等)

Answer 1

CSS 属性(甚至嵌套在媒体查询中)支持使用主题的回调语法，但不支持将其用作断点键的值。下面的示例显示在多个级别使用回调语法——作为顶级属性的值 (padding)，作为顶级媒体查询的值(横向)，以及作为在媒体查询中指定的属性(肖像中的 paddingTop)。

import * as React from "react";
import Box from "@mui/material/Box";
import { Theme } from "@mui/material/styles";

export default function SxWithOrientation() {
  return (
    <div>
      <Box
        sx={{
          border: "solid 1px black",
          padding: (theme: Theme) => theme.spacing(5),
          "@media screen and (orientation: landscape)": (theme: Theme) => ({
            color: "black",
            paddingTop: {
              xs: theme.spacing(2.5),
              sm: 3,
              md: 4,
              lg: 5,
              xl: 6
            },
            backgroundColor: {
              xs: "lightgray",
              sm: "lightblue",
              md: "lightgreen",
              lg: "pink",
              xl: "orange"
            }
          }),
          "@media screen and (orientation: portrait)": {
            color: "white",
            paddingTop: (theme: Theme) => ({
              xs: theme.spacing(5.5),
              sm: 4,
              md: 3,
              lg: 2
            }),
            backgroundColor: {
              xs: "black",
              sm: "blue",
              md: "green",
              lg: "red"
            }
          }
        }}
      >
        This box has responsive padding and colors.
      </Box>
    </div>
  );
}