Skip to content

[Modal] has inline styles instead of classes. Breaks support of classes API  #16442

Description

@burtyish
  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Overriding a Dialog's style class worked in version 3.x, I expected this to continue working. I didn't see anything about this mentioned in the migration guide, under Dialogs.
I do see the following. Is it related? That's not clear.

[Modal] Remove the classes customization API for the Modal component (-74% bundle size reduction when used standalone).

Current Behavior 😯

The dialog's root div is assigned the class MuiDialog-root, but this class has no CSS styles defined.
The class I assigned via the class API has no effect, since the inline styles have higher specificity.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/material-ui-dialog-issue-16442-srl0e

  1. Click the button to open two dialogs. The 'important' dialog should have higher z-index.
  2. If you switch the version of material-ui/core to 3.9.3 and repeat you will see the expected behavior

Context 🔦

In my app, I may have more than a single open dialog (yeah, I know it's bad UX, sorry). So this method is what we use to ensure the dialogs are in a certain order.

Your Environment 🌎

Tech Version
Material-UI v4.1.3
React 16.9
Browser Chrome 75.0.3770.100
TypeScript 3.6.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: modalChanges related to the modal.

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions