MUI v5 中使用 theme.spacing() 进行间距数学计算

Question

在 MUI v4 中，我的 JSS 类中有这样的内容：

paddingTop: theme.mixins.toolbar.minHeight + theme.spacing(1)

然而，在 v5 中，theme.spacing()返回字符串而不是数字。所以上面的语句将 paddingTop 设置为568px，那么56+'8px'现在用间距进行数学计算的正确方法是什么？

Answer 1

MUITheme只是一个对象，您可以轻松地从基本主题扩展其功能。一旦通过组件定义并注入自定义主题ThemeProvider，您就可以开始在子级中的任何位置使用它。

下面的方法使用新方法创建原始主题的增强版本gap(spacing)，该新方法返回数字空间值，px末尾不带单位。您还可以使用theme.space[index]访问该值作为另一种选择：

const createExtendedTheme = () => {
  const defaultTheme = createTheme();
  const gap = (spacing: number) => parseInt(defaultTheme.spacing(spacing), 10);

  return createTheme({
    gap,
    space: {
      0: gap(0),
      1: gap(1),
      2: gap(2),
      3: gap(3),
      4: gap(4),
      5: gap(5),
    },
  });
};

// For Typescript users
declare module '@mui/material/styles' {
  interface ExtendedTheme {
    gap: (spacing: number) => number;
    space: {
      0: number;
      1: number;
      2: number;
      3: number;
      4: number;
      5: number;
    };
  }
  interface Theme extends ExtendedTheme {}
  interface ThemeOptions extends ExtendedTheme {}
}

用法

const theme = createExtendedTheme();

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}>
      <Content />
    </ThemeProvider>
  );
}

function Content() {
  const theme = useTheme();

  return (
    <Box
      sx={{
        width: theme.gap(5) * 2,
        height: theme.gap(1) + theme.gap(2),
        height: theme.space[1] + theme.space[2], // same as above
        bgcolor: "tomato"
      }}
    />
  );
}

现场演示

Answer 2

`calc(${theme.mixins.toolbar.minHeight} + ${theme.spacing(1)})`