Question

我正在努力寻找有关文档（或通过对代码进行实验而得出的结果）的文档，该文档的目的是将布尔值用作material-ui中网格组件的断点支持值。咨询grid api documentation会发现布尔值是断点道具lg，md，sm，xl，xs的有效值。

我知道，如果我说sm={3}，则当显示宽度增加到超过xs断点（600px）时，我将得到一个组件，该组件将占用3个网格列单位，但不知道将布尔值作为值：

例如，提供xs={true}或md={false}的原因是什么？我如何独自了解原因？（我缺少一些基本知识吗？）

Answer 1

例如，提供xs = {true}或md = {false}的原因是什么？我如何独自了解原因？（我缺少一些基本知识吗？）

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

现在进入其背后的推理。这就需要对源代码进行一些检查，取决于您对语言的理解程度以及他们编写语言的能力。

在页面底部显示：

... implementation of the component详细信息...

跟随链接，它显示了如何根据传递的值设置样式。对于true，应该是

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

和false没有包括在内，这可能意味着它将阻止这些样式被完全应用。

希望有帮助！

Answer 2

根据文档

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

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

例如，提供xs = {true}或md = {false}的原因是什么？我如何独自了解原因？（我缺少一些基本知识吗？）

此xs={true}表示该列将占用给定行中的相等空间。因此

<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

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

2 个答案: