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

[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?