[typography] Allow sx prop-like responsive values on the variant prop

[drico]

Summary

For a lot of props, the Sx syntax is availble, like

<Typography color={{xs: 'red', md: 'blue'}} >

Or even

<Typography color={(theme) => ({xs: 'red', md: 'blue'})} >

But this syntax doesn't work with the variant prop. => the following is not working

<Typography variant={{xs: 'h1', md: 'h2'}} > // not working
<Typography variant={(theme) => ({xs: 'h1', md: 'h2'})} > // not working

Examples

No response

Motivation

It would be great if this syntax could work. :
Simply to use a different variant depending on screen size (very common use case I think)
It would be very usefull in projects that deal with multiple themes.
It's also usefull during double run (theme migration while both old theme and new theme must coexist in the code).

Search keywords: variant typography

[danilo-leal]

Hey @drico, thanks for opening the issue! This sounds very much related to this issue: #41402, where they propose to make the size prop "breakpoint-aware". This could work the same with other props, such as variant, in this case.

@brijeshb42 & @siriwatknp, should both of these issues be generalized into something Pigment CSS could handle? I guess whatever approach we take here, it should be standardized and available for Material UI and Joy UI (in the long term). What do y'all think?

[brijeshb42]

I am not sure if this comes under Pigment CSS or even @mui/system. The props for which the sx syntax is available are native css properties and unrelated to that specific component. But @mui/system or Pigment CSS only deals with native CSS properties with some extended syntax.
This requirement is asking to deviate from that and include other properties as well (eg: variant). As an example, variant for one component (primary/secondary for Button) may not mean the same thing for some other component (ie, example above). So it'll ideally have to be dealt with in the package that has these prop definitions.

[danilo-leal]

Ah yeah, true. I guess what both of these issues are requesting is a similar responsive syntax to the sx prop for using different variants depending on the breakpoint. We have the useMediaQuery hook for that already, but maybe there's a more sx-like way to write it?