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

Question

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 componen

Answer 1

As per the docs

• xs, extra-small: 0px or larger
• sm, small: 600px or larger
• md, medium: 960px or larger
• lg, large: 1280px or larger
• xl, extra-large: 1920px or larger

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

This xs={true} means that the column will take up an equal space that is in a given row. so given

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

This will have 3 equal grids.

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

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.

At the bottom of the page it says:

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

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;
}

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

Hope that helps!