[system] maxWidth prop does not respect rem breakpoints

[fymmot]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/pedantic-currying-28qrhq?file=/Demo.tsx

Steps:

1. Create a theme with custom breakpoints, and set the breakpoint unit to "rem" . Define the sm breakpoint as 22.5.
2. With the new theme, use the maxWidth prop with value "sm" on any component that support it, e.g. Typography or Box
3. Examine the end result and the rendered styles.

Current behavior 😯

The max-width style is rendered incorrectly with hardcoded px width instead of rem.

E.g. max-width: 22.5px

Expected behavior 🤔

The max-width style should use the actual rem value from the theme:

E.g. max-width: 22.5rem

Context 🔦

We are trying to convert our MUI-based component library to rem breakpoints so that our components can better support text scaling (required for accessibility compliance and for good UX).

However, this issue is stopping us from being able to go through with the change since the maxWidth prop is used quite extensively by our component consumers.

Your environment 🌎

npx @mui/envinfo

  Tested latest version via CodeSandBox using Chrome and Safari.

[mj12albert]

Thanks for reporting this and for the repro, it looks like custom breakpoint units are not accounted for in the sizing util here