[Dialog] does not respect breakpoint units

[JasonTolliver]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The Dialog component's maxWidth property has very unexpected results when you have customize breakpoints in the theme to us em as a unit. For example, say you use the following theme:

const theme = createMuiTheme({
  breakpoints: {
    unit: "em",
    values: {
      xs: 0,
      sm: 30,
      md: 48,
      lg: 78,
      xl: 120
    }
  }
});

and you compose a <Dialog maxWidth={'sm'}>Content</Dialog>, the dialog will end up being 30px wide vs 30em wide.

It looks like the offending bits of code live here:
https://github.com/mui-org/material-ui/blob/ff6bde2063ce9106ca30a037b7dc46aa4a48083a/packages/material-ui/src/Dialog/Dialog.js#L84-L118

Whereas the maxWidth should probably be calculated as:

- maxWidth: theme.breakpoints.values.sm,
+ maxWidth: `${theme.breakpoints.values.sm}${theme.breakpoints.unit}`,

I am unsure how '&$paperScrollBody' works, otherwise I might have just submitted this as a PR.

Expected Behavior 🤔

With the given theme, I expect <Dialog maxWidth={'sm'}>Content</Dialog> to be 30em wide

Steps to Reproduce 🕹

https://codesandbox.io/s/agitated-edison-l10fk

Steps:

1. Set up breakpoints with a unit of em
2. Use a Dialog component with a maxWidth
3. The dialog will use px instead of em with the breakpoint value.

Context 🔦

I am using MUI components alongside another system that handles the layout. That system uses em and I need it to match.

Your Environment 🌎

Tech	Version
Material-UI	latest
React	latest
Browser	all

[oliviertassinari]

@JasonTolliver Thanks for opening this issue. We are eager to offer more flexibility around the structure of the theme. The first proposed change sounds good:

maxWidth: `${theme.breakpoints.values.sm}${theme.breakpoints.unit}`,

However, it seems that it won't cover all the cases ($paperScrollBody). The style is required when the Dialog can scroll with the body container, maybe we can ignore the problem?

[el1f]

@JasonTolliver this seems prime for closing :)

[oliviertassinari]

@el1f What do you mean? As far as I know, the issue still stands. #23191 fix a similar one with the Container.

[el1f]

My bad, I misinterpreted the PR. If no-one else is working on this I'd like to take a spin on it :)