How to Perfectly Size and Position the Material UI Dialog Component (MUI v5)

Do you want to build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and never again fear styling any MUI component?!? Do you want an active Q&A with me?!? Then check out my Udemy course! (Currently I have an active COUPON!!!):

The Material-UI Dialog component can be difficult to precisely size and position. With this demo you will see several props for sizing, plus exact positioning using the sx prop (or makeStyles/useStyles for v4).

[annu]

Thank you!!! It helped me a lot....was stuck from last 2 hours

[MrHubtech]

Hi, I have a question that I can't seem to figure out and maybe you can help? How to get the height of the Mui v5 dialog component within useEffect. I'm new to both React and Mui. Thanks for your time - I'm a new subscriber.

[AndriusLauFullstack]

Maybe you have plans to create a video about the initial style when starting a new project with material UI v5. As a backend dev, I'm interested to use only Material Ui from the start without any CSS files. I think it will use create them to add all those primary, secondary colours, all those margin 0 for the body ant etc.

[keepforever]

Hey,

At my job, I inherited a large-ish CRA monolith that used MUI-v4, however, the dev that started the app (~1.5 yrs ago) and barely leveraged the theme for the design system at all, only really adding a bunch of colors to the pallette.

Now, I have a feature branch cooking with the upgrade to MUI-v5, and I really want to lean into augmenting components in the theme components api as much as possible.

I'd be really interested in hearing your take in a video on how you'd balance between augmenting in the theme vs. sx props vs. what you'd do a component level (i.e. wrapping a MUI component)?

For example, if you were tasked with implementing a design system (say, you're given a figma with a desired look of all the stock components).

[MuhammedRKartal]

Hi I am kinda new to mui5, when there is a overflow problem in the modal and I gave overflow auto to the main div of modal, it overrides the body's overflow:hidden property, I mean I want to scroll in modal but not in the background, I want to disable background scrolling when modal is open, how can I do it, do you have any idea?