Material-ui: [Hidden/Grid] Custom breakpoint support

[DriesDeBackker]

Currently, Material-UI supports custom breakpoints , but this support seems to be lacking in some components, in particular in. Hidden. The breakpoints used in this component are fixed and come with an -Up and -Down prop. I suggest that Hidden switches to a single 'up' and 'down' prop for all breakpoints, which can for instance be set as follows up="xs" down="xxs lg" (with xxs a custom breakpoint defined in the theme)

[eps1lon]

I think we're missing the same feature for the Grid component. @oliviertassinari wanted to implement this at some point if I recall correctly.

[oliviertassinari]

@eps1lon Agree, I think that we should support custom breakpoints anywhere we can. However, It depends on the outcome of #19704.

[SassNinja]

@oliviertassinari any update on this?

The issue you've linked refers to the Hidden component.
However what I really need (and what is mentioned in this issue, too) is full custom breakpoint support for the Grid component.

When I create something like this

const theme = createMuiTheme({
  breakpoints: {
    keys: ['small', 'medium', 'large'],
    values: {
      small: o,
      medium: 640,
      large: 1025
    }
  }
});

I'd like to use this everywhere e.g.

<Grid small={12} large={6} item>

[oliviertassinari]

@SassNinja No direct progress yet but we have almost solved the blocker on the style engine (in progress JSS -> emotion/sc transition).