theme breakpoint for sm uses 960px instead of 600

[danielo515]

I see that breakpoint function of the theme is not using the correct width pixels.

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

The following style object:

 [theme.breakpoints.down('sm')]: {height: 400}

Produces the followingn rule:

@media (max-width: 959.95px)
.makeStyles-fixedHeight-285 {
    height: 400px;
}

Expected Behavior 🤔

I expected the used value to be 600px and not 959

Steps to Reproduce 🕹

Here is a small sandbox to demonstrate it:

https://codesandbox.io/s/elated-hoover-sldxi

Context 🔦

According to docs, sm breakpoint should be 600px

Your Environment 🌎

Tech	Version
Material-UI	v4.9.0

[Studio384]

You are looking for xs. down('sm') is "everything that is sm or lower". sm is 600px until 959.95px. This is the expected behavior. If down('sm') would be everything below 600px, then there is no way to select the largest breakpoint (because down('xl') would select lg) and xs would have to select everything below 0px.

[danielo515]

xs is translated to 0, which is completely useless.
There is no way to target from 600px to 0 ? From your comment I suggest that down('xs') should give me what I expect, but instead it is translated to 0

[danielo515]

Well, I took another look at my sandbox and down('xs') is behaving as expected. I'll try on my actual app and close this issue.

Thanks for the clarification.

[mustafa-hanif]

You are looking for xs. down('sm') is "everything that is sm or lower". sm is 600px until 959.95px. This is the expected behavior. If down('sm') would be everything below 600px, then there is no way to select the largest breakpoint (because down('xl') would select lg) and xs would have to select everything below 0px.

The documentation convey this very badly

[oliviertassinari]

@mustafa-hanif Check the docs in v5, we have changed the behavior.

[oliviertassinari]

Duplicate of #13448