How to display modal without backdrop effect with react-modal?

Question

I am using react-modal for both modals and notifications. I would like to disable the overlay/backdrop effect on the modal. I went through the API and I can't see anything about it.

Here is a basic modal I set up. https://codesandbox.io/s/upbeat-ptolemy-g0pyb?file=/src/App.js

Any suggestions on how only display the modal without the backdrop? Note that I want to be able to close the modal if click outside of it.

Answer 1

As you can see from the image, i've removed background color property to remove overlay

styles.css

.ReactModalPortal .ReactModal__Overlay.ReactModal__Overlay--after-open {
  background-color: unset !important;
}