[a11y] Add first class support for REM

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

As of today MUI does a terrific job with Accessibility, including default REM support for Typography.

This feature request intends to raise the issue with limiting REM support to just Typography and Iconography.

For example, using default MUI I go to my browser settings and I change the font size to "Very Large" in Chrome and here is how the Stepper component looks like:

Notice that just changing the font size in the Browser makes MUI change the font size of the stepper text and now things are not centered

Examples 🌈

Button

Here is what I've done to change the button defaults to use rems

https://codesandbox.io/s/mui-rem-overrides-0cntz9

Stepper

This one seems more complicated to fix given that the centering of the SVG text is done in Javascript I believe

https://codesandbox.io/s/mui-rem-overrides-stepper-bl1f0s?file=/index.js

Motivation 🔦

I intend to use MUI out of the box and have REM support across the board where changing the Browser font size will not result in default MUI components looking weird and not aligned well

Start with the Button and Stepper examples linked in the issue, then inspect the corresponding MUI component behavior when the browser font size is set to Very Large. Compare the default rendering with the REM overrides shown in the CodeSandbox examples; done means MUI components retain appropriate sizing and alignment when browser font size changes.