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',
},

Answer 1

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