How to disable MuiBackdrop in Muidialog (Material UI react)

Question

Whenever I called the MuiDialog tag in material UI, It's always render a div tag for Backdrop like this:

<div class="MuiDialog-root> 
    //THIS IS IT
    <div class="MuiBackdrop-root" aria-hidden="true" style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"></div>
</div>

I know that in MuiDialog, we can set attributes for Backdrop like this:

<MuiDialog BackDropProps={{//WRITE SOMETHING HERE}}
>
</MuiDialog>

But I don't know what to fill in to make It disappear. Please help

Jello

Does this answer your question? How to handle "outside" click on Dialog (Modal)? – Shumate

Answer 1

You need to set the hideBackdrop prop to true.

If you look at the bottom of the dialog docs on material UI it has this:

Inheritance. The props of the Modal component are also available. You can take advantage of this behavior to target nested components.

hideBackdrop is a prop in the Modal component.

Faithfaithful

Try setting hideBackdrop to true in the dialog it should work just fine – Faithfaithful

wjpayne83, It's really weird that It did work somehow but the document didn't mention about It. Thank you :-). Anyway, If you update your answer, I will mark It :-) – Jello

You could do it both ways, using BackDropProps or by hiding the backdrop as suggested in this answer. – Arianna

No worries! glad to help, I updated my answer. – Faithfaithful