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
- Click the button to open two dialogs. The 'important' dialog should have higher z-index.
- 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 |
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.
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
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 🌎