Mui 主题断点未按预期工作

Question

我已经为基于 mui React 的应用程序设置了断点，如下

export const lighttheme = createTheme({
  palette: palette,
  typography: typography,
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
      xxl: 2160,
    },
  },
  components: {
    MuiTooltip: LightMuiTooltip,
    MuiDrawer: {
      styleOverrides: {
        root: {
          display: "flex",
          minHeight: "100vh",
          zIndex: 1,

          overflow: "hidden",
        },
      },
    },
  },
});

在我的组件中我说的是

 const InnerNavBox = styled(Box)(() => ({
    justifyContent: "space-between",
    alignItems: "center",
    display: "flex",
    flexDirection: "column",
    gap: theme.breakpoints.between("lg", "xxl") ? "4rem" : "2rem", //"2rem",
  }));

我正在检查屏幕尺寸屏幕 1 - 1194x834 和屏幕 2 - 1728x1117。我预计屏幕 1 的间隙为 2rem，屏幕 2 的间隙为 4rem。但是，现在两个屏幕都变成了 4rem。我不确定我做错了什么。有谁可以帮忙吗？

Answer 1

theme.breakpoints.between(start, end)

返回媒体查询

string

，而不是

boolean

。您在示例中使用它的方式将始终评估为

true

（因为

between()

的返回值是非空

string

）——因此您的 ternary 将始终返回

'4rem'

。

您尝试使用它的正确用法是：

const InnerNavBox = styled(Box)(({ theme }) => ({
  justifyContent: "space-between",
  alignItems: "center",
  display: "flex",
  flexDirection: "column",
  gap: "2rem", // define a default behavior
  [theme.breakpoints.between("lg", "xxl")]: { // override the default behavior if within these breakpoints (inclusive)
    gap: "4rem",
  }
}));

但我想，对于这种特殊情况（假设你不会有比

xxl

更大的断点），你真正想要的是

theme.breakpoints.up(key)

：

const InnerNavBox = styled(Box)(({ theme }) => ({
  justifyContent: "space-between",
  alignItems: "center",
  display: "flex",
  flexDirection: "column",
  gap: "2rem", // define a default behavior
  [theme.breakpoints.up("lg")]: { // Notice `up()`, not `between()` -- override the default behavior if within the defined breakpoint or higher
    gap: "4rem"
  }
}));

工作 CodeSandbox： https://codesandbox.io/s/theme-breakpoints-pvyhjd?file=/demo.tsx