Use @material-ui/system in the core components

• 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' }} />

[oliviertassinari]

and create a rabbit hole where we do this with all components eventually.

@yordis Yes, it’s the idea. There is a related opportunity we can explore. We could have a component that generates thousands of global class names, a là tailwind, that we could apply directly as class names. It would extend the system support to all elements on the page.

<button className="p-3" />