如何在 MUI 5 的断点属性内访问主题？

Question

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

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>
  );
}

Answer 2

许多 sx 属性都是 theme aware，包括 padding，因此您无需使用主题回调来获取主题值：

sx={{
  paddingRight: {
    xs: 0, // theme.spacing(0)
    sm: 3, // theme.spacing(3)
    md: 5, // theme.spacing(5)
  },
}

但出于某些原因，如果您想使用回调（例如用其他值计算），您可以这样做：

正常值

paddingRight: 2,

带回调的正常值

paddingRight: theme => `calc(${theme.spacing(2)} * 10)`,

断点值

paddingRight: {
  xs: `calc(0px * 10)`,
  sm: `calc(4px * 10)`,
  md: `calc(8px * 10)`,
},

带回调的断点值

paddingRight: (theme) => ({
  xs: `calc(${theme.spacing(0)} * 10)`,
  sm: `calc(${theme.spacing(1)} * 10)`,
  md: `calc(${theme.spacing(2)} * 10)`,
}),

如果您的很多属性需要使用回调：

sx={{
  paddingRight: (theme) => theme.spacing(2),
  margin: (theme) => ({
    xs: theme.spacing(0),
    sm: theme.spacing(2),
  }),
  '& .child': {
    color: (theme) => theme.palette.primary.contrastText,
    bgcolor: (theme) => theme.palette.primary.main,
  },
}}

您可以使用这个技巧来简化它们：

sx={{
  '&': (theme) => ({
    paddingRight: theme.spacing(2),
    margin: {
      xs: theme.spacing(0),
      sm: theme.spacing(2),
    },
    '& .child': {
      color: theme.palette.primary.contrastText,
      bgcolor: theme.palette.primary.main,
    },
  }),
}}

还记得我说过属性是主题感知的吗？由于与 MUI 主题的紧密集成，可以简化上面的代码：

sx={{
  pr: 2,
  m: {
    xs: 0,
    sm: 2,
  },
  '& .child': {
    color: 'primary.contrastText',
    bgcolor: 'primary.main',
  },
}}

如何在 MUI 5 的断点属性内访问主题？

How to access theme within a breakpoint attribute in MUI 5?

reactjs

material-ui

sx

正常值

带回调的正常值

断点值

带回调的断点值