Error in documentation of theme.breakpoints.down

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When I use this

const useStyles = makeStyles(theme =>
  createStyles({
    inner: {
      color: "blue",
      [theme.breakpoints.down("lg")]: {
        color: "red"
      }
    }
  })
);

then the generated CSS is this:

.makeStyles-inner-17 {
  color: blue;
}
@media (max-width:1919.95px) {
  .makeStyles-inner-17 {
    color: red;
  }
}

Expected Behavior 🤔

theme.breakpoints.value.lg equals 1280, so I expected the generated CSS to be like this:

.makeStyles-inner-17 {
  color: blue;
}
@media (max-width:1280px) {
  .makeStyles-inner-17 {
    color: red;
  }
}

Steps to Reproduce 🕹

Sandbox: https://codesandbox.io/s/nostalgic-frost-m8boc?file=/src/Demo.js

Steps:

1. Move the border between the source code and the right part of the screen called “Browser”.
2. Watch a red string that says “The current window width is 1400 … This string should be red when the width of the window is less than or equal to 1280.”
3. Move the border so that the window becomes wider than 1920
4. Watch the displayed string turn to blue.

Context 🔦

I am trying to design a responsive web page.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0

[ruhci28]

Hii @oliviertassinari i can i work on this .?

[mattes3]

Oh, I see! Then, if both issues are resolved, everything will be fine, thanks!