reactjs - 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

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.