material-ui中的断点道具(xs，sm，md ...)的布尔值的目的是什么 [英] What is the purpose of boolean values for the breakpoint props (xs, sm, md...) in material-ui

问题描述

我正在努力寻找有关文档(或通过对代码进行实验而得出的结果)的文档，该文档的目的是将布尔值用作material-ui中网格组件的断点prop的值. 查阅网格api文档，我们发现布尔值是断点道具lg，md， sm，xl，xs.

I am struggling to find documentation on (or results via experimenting with code) what the purpose is of having booleans as values for breakpoint props for the grid component in material-ui. Consulting the grid api documentation reveals that booleans are valid values for the breakpoint props lg, md, sm, xl, xs.

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

I understand that if I say sm={3} I will get a component that changes to take up 3 grid column units once the display width increases beyond the xs breakpoint (600px) but have no idea about passing a boolean as a value:

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

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}或md = {false}的原因是什么?我如何独自了解原因呢? (我缺少一些基本知识吗?)

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?)

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

The truth is, libraries and frameworks are generally opinionated in their execution. There's no way to easily tell what every reason behind each decision is unless they themselves explain it. While in some cases the reasoning can be deduced with moderate effort, other cases are far too niche to warrant heavy explanation in most cases. You can and should open an issue on the project's github page (please search first!) to find out the logic behind it, which can often lead to improvements documentation-wise.

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

Now onto the reasoning behind it. This requires some examination into the source code which can be hit/miss depending on how well you understand the language, and how well they wrote it.

在页面底部显示:

...

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

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

After following the link, it shows how it sets the styles depending on the value passed. For true it would be

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

没有涵盖

和false，这可能意味着它将阻止这些样式被完全应用.

and false isn't covered which likely means it will prevent those styles from being applied entirely.

希望有帮助！

这篇关于material-ui中的断点道具(xs，sm，md ...)的布尔值的目的是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！