如何使用 MUI 中的断点?

我想通过使用 MUI 断点使我的项目具有响应性,但我不知道如何以简单的方式使用它们,我认为创建 const 样式 正如他们在文档中解释的那样不是一种简单方便的方法给菜鸟的!如果您有关于此主题的任何信息与我分享,我将不胜感激。

stack overflow How to use breakpoints from MUI?
原文答案
author avatar

接受的答案

要回答这个问题,需要更深入地研究 MUI 的“sx”道具语义。 MUI 组件“sx”prop 的每个属性都可以直接设置或通过回调函数设置。

1.使用属性中的值

首先,可以直接设置值。例如,如果我们需要使用“sx”道具的特定属性(例如填充),只需在“p”中添加一个数字即可轻松完成。通常,计算间距的像素值等于 8 个像素。

<Box
  sx={{
    p: 1
  }}
/>

2.在属性中使用回调函数

在第二种方式中,该值可以设置为一个回调函数,它有一个主题作为参数,只要一切都与“主题上下文”相关。由“ThemeProvider”提供之前的“主题”对象,可以在嵌套组件中使用。

<ThemeProvider theme={theme}>
  <Provider store={store}>
    <CssBaseline />
    <BrowserRouter>
      <RTL>
        <App />
      </RTL>
    </BrowserRouter>
  </Provider>
</ThemeProvider>

当只能通过回调完成时,这是使用主题而不处理大量逻辑的简写。因此,组件保留为转储或呈现组件,而不涉及业务逻辑。在此示例中,间距是使用“主题”对象手动计算的。此实例类似于前面的示例,它以第一种方式提供,将 18px 设置为“Box”组件的内边距。

<Box
  sx={{
    padding: (theme) => theme.spacing(1),
  }}
/>

为了在不使用回调函数的情况下使用“主题”对象的实用函数的间距,有必要使用“useTheme”挂钩来访问它。

const SampleComponent = () => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        p: theme.spacing(1),
      }}
    />
  );
};

很明显,当桌面上有另一个选项(如“sx”道具中的主题)时,在呈现的组件中使用“useTheme”并不是一个好的选择。

3.使用回调函数作为主值

与前面的方法相比,还有另一种访问“主题”的方法,即通过回调函数设置作为对象的主“sx”道具值。与第二种方式类似,当在“sx”属性的值中定义回调函数时,可以访问主题。

<Box
  sx={(theme) => ({
    color: theme.palette.primary.main,
    bgColor: theme.palette.grey.A100,
  })}
/>

在此示例中,目标是使用可以在整个“sx”对象值中使用的“主题”对象访问调色板值。到这里,在“sx”道具中使用“主题”对象的要点就可以理解了。此外,在复杂的情况下使用它更明智,例如对多个断点使用特定样式。

const SampleComponent = () => {
  const theme = useTheme();
  const onlySmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
  const onlyMediumScreen = useMediaQuery(theme.breakpoints.down("md"));
  const onlyLargeScreen = useMediaQuery(theme.breakpoints.down("md"));

  return (
    <Box
      sx={{
        p: onlySmallScreen ? 2 : onlyMediumScreen ? 4 : onlyLargeScreen ? 6 : 1,
      }}
    />
  );
};

在示例中,目标是通过各种断点更改填充。如图所示,当此处确实不需要使用任何逻辑时,该逻辑就在此组件中进行。该示例可以重写为完整呈现的组件,而无需参与逻辑。

const SampleComponent = () => (
  <Box
    sx={(theme) => ({
      p: 1,
      [theme.breakpoints.down("sm")]: {
        p: 2,
      },
      [theme.breakpoints.down("md")]: {
        p: 2,
      },
      [theme.breakpoints.down("lg")]: {
        p: 2,
      }
    })}
  />
);

此代码被重写为示例代码,其中没有任何逻辑。

当当前设备宽度不合适或不在确定的范围内时,短语“p:1”是后备填充。

必须考虑到,每一个好处也可能有一个缺点,选择使用这种方法有一些限制:

• 断点作为“sx”回调函数值,不能传递给之前定义的 HOC 组件。

• 当MUI 组件的另一个prop 需要知道何时更改断点时,无法使用theme => theme.breakpoints.down(“sm”) 传递布尔值。这是通过在该道具中设置 useMedaQuery 值来完成的。

const theme = useTheme();
const onlySmallScreen = theme.breakpoints.down("sm");

<Dialog open={true} fullScreen={onlySmallScreen} />;

答案:

作者头像

设置主题后(Muhamad Zolfaghari 的回答),您可以执行类似在组件级别传递 sx 道具中的断点之类的操作。

<Div
  sx={{ backgroundColor: { xs: "red", md: "green", lg: "blue" }, }}
>
  //CODE
</Div>