Adding breakpoint to custom theme in Material UI Next (reactjs)

Question

I'm creating a custom theme with mui as follows:

export default createMuiTheme({
  breakpoints: {
    keys: [
      "xxs",
      "xs",
      "sm",
      "md",
      "lg",
      "xl",
    ],
    values: {
      xxs: 0,
      xs: 414, // iPhone X and below in portrait mode
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
})

But when I try to use it in a class declaration like so:

const styles = theme => ({
  root: {
    [theme.breakpoints.down('xxs')]: {
      textAlign: "center",
      padding: theme.spacing.unit * 2,
    },
  },
})

I get the following CSS:

@media (max-width:NaNpx) {
  .root-3 {
    padding: 16px;
    text-align: center;
  }
}

Is there a special way to add a custom breakpoint vs. just modifying existing ones?

Answer 1

Currently it is only possible to customize the values of the predefined breakpoints. Here is an example:

const theme = createMuiTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 450,
      md: 600,
      lg: 900,
      xl: 1200
    }
  }
});

The breakpoint names cannot be configured. There is a comment in createBreakpoints.js explaining this:

// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
export const keys = ['xs', 'sm', 'md', 'lg', 'xl'];

---

UPDATE (September 2018):

This feature has been requested and is currently under discussion. See material-ui/issues/11649