Use @material-ui/system in the core components

[dmtrKovalenko]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

It will be super useful to have per-breakpoint align prop. E.g. alignSm, alignLg -- them will add an ability to make responsive designs with no tears 😢

Current Behavior 😯

It is required to manually change text align for Typography
Something like that:

alignCenterSm: {
  [theme.breakpoints.down('sm')]: {
    align: 'center'
  }
}

Examples 🌈

Smth similar is already implemented in vuetify -> https://vuetifyjs.com/ru/framework/alignment

[oliviertassinari]

@dmtrKovalenko The best solution, for now, is to do:

<Box textAlign={{ xs: 'left', md: 'center' }} clone>
  <Typography />
</Box>

The long term strategy is to find a way to have the core components host the system directly so we don't have to use an extra Box + clone. So people can do:

<Typography textAlign={{ xs: 'left', md: 'center' }} />

[jeremy-coleman]

You can use es6 proxies to add the props on demand or nest them 1 level and put them all on one prop, or use the generateId logic from glamor jss to use data- selectors and just spread into the element like <div {...boxprops}/> and just rerender style def on change

[kvnwolf]

+1 for this. I don't know if it is a crazy idea, but I will suggest to wrap all components with Box. On this way, we can apply the same margin and padding properties for example on a button instead of having to wrap it with a Box.