material-ui 中断点道具（xs，sm，md ...）的布尔值的目的是什么

Question

我正在努力寻找文档（或通过代码试验得到的结果），将布尔值作为 material-ui 中网格组件的断点道具的值的目的是什么。咨询 grid api documentation 表明布尔值是断点道具 lg、md、sm、xl、xs 的有效值。

我知道如果我说 sm={3} 我将得到一个组件，一旦显示宽度增加超过 xs 断点 (600px)，我将更改为占用 3 个网格列单元，但不知道如何传递布尔值作为一个值：

例如提供xs={true}或md={false}的原因是什么？我怎么可能自己知道原因呢？（是不是我缺少一些基础知识？）

Answer 1

根据文档

xs，超小：0px 或更大
sm，小：600px 或更大
md，中：960px 或更大
lg，大：1280 像素或更大
xl，超大：1920 像素或更大

引用https://material-ui.com/layout/breakpoints/

For example what would be the reason for providing xs={true} or md={false} be? And how might I have learned the reason on my own? (is there some fundamental knowledge I'm lacking?)

这 xs={true} 意味着该列将占用给定行中的相等 space。所以给出

<Grid container spacing={24}>
  <Grid item xs>
    <Paper className={classes.paper}>xs</Paper>
  </Grid>
  <Grid item xs>
    <Paper className={classes.paper}>xs</Paper>
  </Grid>
  <Grid item xs>
    <Paper className={classes.paper}>xs</Paper>
  </Grid>
</Grid>

这将有 3 个相等的网格。

引用https://material-ui.com/layout/grid/#auto-layout

Answer 2

For example what would be the reason for providing xs={true} or md={false} be? And how might I have learned the reason on my own? (is there some fundamental knowledge I'm lacking?)

事实是，库和框架在执行时通常是自以为是的。除非他们自己解释，否则无法轻易说出每个决定背后的每一个原因。虽然在某些情况下可以通过适度的努力推断出推理，但在其他情况下，其他情况太小众以至于无法在大多数情况下进行大量解释。您可以而且应该在项目的 github 页面上打开一个问题（请先搜索！）以找出其背后的逻辑，这通常会导致文档方面的改进。

现在谈谈背后的原因。这需要对源代码进行一些检查，这可能 hit/miss 取决于您对语言的理解程度以及他们编写的程度。

页面底部显示：

... the implementation of the component for more detail ...

在 link 之后，它显示了如何根据传递的值设置样式。对于 true 它将是

if (size === true) {
  // For the auto layouting
  styles[key] = {
    flexBasis: 0,
    flexGrow: 1,
    maxWidth: '100%',
  };
  return;
}

和 false 未涵盖，这可能意味着它会阻止完全应用这些样式。

希望对您有所帮助！

material-ui 中断点道具（xs，sm，md ...）的布尔值的目的是什么

What is the purpose of boolean values for the breakpoint props (xs, sm, md...) in material-ui

code-documentation

reactjs

material-ui