ReactJS: Material ui breakpoints

Question

What is the difference between breakpoints.up, breakpoints.down, breakpoints.between and breakpoints.value ? And what is meant by this code, how breakpoints value is working here? Is theme.spacing.unit*2*2 = theme.spacing.unit*4 or it has some other meaning?

[theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: {
  width: 600,
  marginLeft: 'auto',
  marginRight: 'auto',
},

Solution

Material uses the following set of breakpoints. You can customize the values of this breakpoint in the theme.

Breakpoint documentation

A breakpoint is the range of predetermined screen sizes that have specific layout requirements.

• 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

The functions you asked about (up, down, between) are helpers for creating media queries using the breakpoints defined in the theme.

Note: breakpoints.up() and breakpoints.down() also accept a number, which will be converted to pixels. This is not true of the other methods.

breakpoints.up(breakpoint | number)

Creates a min-width media query that targets screen sizes greater than or equal to the given breakpoint.

// Styles will be applies to screen sizes from "sm" and up
[theme.breakpoints.up('sm')]: {
  // styles
}

breakpoints.down(breakpoint | number)

Takes a breakpoint name and creates a max-width media query that targets screen sizes up to and including the given breakpoint.

Because this is inclusive, the max-width will be the value of the next breakpoint up.

// Styles will be applies to screen sizes from 0 up to and including "md"
[theme.breakpoints.down('md')]: {
  // styles
}

breakpoints.between(start, end)

Takes two breakpoint names, and creates a media query that targets screen sizes from the first breakpoint, up to and including the second breakpoint.

// Styles will be applies to screen sizes from "sm" up to
// and including "lg"
[theme.breakpoints.between('sm', 'lg')]: {
  // styles
}

---

breakpoints.values

An object containing the breakpoint values defined in the theme

{xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920}

breakpoints.width(breakpoint)

This function is used to get the value of a specific breakpoint.

theme.breakpoints.width('sm')  // => 600

Comments

[Luke Peavey]

There is no special meaning to [theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]

[Luke Peavey]

Its the same as theme.spacing.unit * 4. I just posted an answer with an explanation of the various breakpoint methods you mentioned. Let me know if it answers your questions.

[Jatin Goyal]

Thanks Luke! But why it is (600 + theme.spacing.unit*4) and not just (600)? This code snippet is taken from material ui source code.

[Luke Peavey]

Do you know what file it was in?

[Luke Peavey]

Material-UI uses an 8 point grid for layout & spacing...

[Luke Peavey]

theme.spacing.unit (8) is the base unit for the layout grid. So all of the margins/padding etc are multiples of theme.spacing.unit. That code snippet is a media query for 600px plus 16px * 2, which is probably to account for left/right margin/padding.

[Jatin Goyal]

Thanks Luke! I understood the concept. This actually means that if the screen size is below the mentioned value for breakpoints.up, none of the specified padding and margin will be applicable.

[Luke Peavey]

Exactly. It sets the width to 600px as long as screen size is at least 600px + 16px * 2, which leaves at least 16px of space on either side.

[Marc]

theme.breakpoints.down('sm') translates to @media (max-width: 959.95px). That seems weird to me (material-ui 4.2.1)

[Luke Peavey]

Hmm... this answer was written for Material UI v1.x, so it might need to be updated. I

[Kamlesh]

@LukePeavey how can we know that this is the current breakdown of theme in react? Which breakdown was applied on rendered component? How can we set a drawer by using a current breakdown condition? Kindly suggest. Thanks.