How to create a non modal dialog in material-ui

Question

I am trying to create a dialog in material ui which does not blocks the main content.

With my below code i am only able to hide backdrop but not able to disable the backdrop.

 <Dialog open={this.state.open}  onClose={this.handleClose} hideBackdrop={true} > 

Can someone please address my this concern on how to create modals using material-ui which does not blocks the main content

Answer 1

I just wanted to post this as a separate answer. The OP was able to solve his problem by disabling pointer events on the root dialog/modal:

const StyledDialog = withStyles({ 
  root: { pointerEvents: "none", }, 
  paper: { pointerEvents: "auto" } 
})(props => <Dialog hideBackdrop {...props} />);

I also tested the following and it worked as well (should also work with Modal component). Note, I also had to use disableEnforceFocus, which is a property of the Modal component. You should be aware that there are implications for accessibility when doing this. It's on you to handle the accessibility correctly.

<Dialog 
  disableEnforceFocus
  style={{ pointerEvents: 'none' }}
  PaperProps={{ style: { pointerEvents: 'auto' } }}
>
...
</Dialog>