How to Size and Position the Material-UI (MUI) Dialog Component
The Material-UI (MUI) Dialog component is one of the most challenging MUI components to style. It is composed of a modal, container, and usually several internal dialog components like DialogContent.
It can difficult to position the appropriate subcomponent within Dialog because the Dialog API does not expose a style prop for every subcomponent. However, Material-UI recently released v5, which included a significant update to their styling APIs (and some component APIs).
My goals with this article are:
- Successfully set custom size and position for the Dialog component
- Explore and hopefully use only MUI v5 styling APIs without relying on v4 makeStyles and useStyles (but I will include code for v4 styling)
A Code Sandbox link with full React code is in the Resources section. Here’s the MUI Dialog component with every prop enabled.
Sizing the MUI Dialog Component
There are three props for directly manipulating the size of the top-most visible element of the dialog component. The topmost element is a Paper component by default, which is how I will refer to it. Another option is to pass styling to the Paper’s sx prop using PaperProps, but I’ll get to that later.
