If you want to update modal backdrop you could use CSS like:

.modal-backdrop {
  background-color: green;
}

If you want to change modal background then use:

<Modal className="my-modal" show={show}>

and define in CSS:

.my-modal .modal-content {
  background-color: red;
}

Just assign an object with your styles for the overlay to a variable say, bg inside your render and then just use the styles prop to reference that object in your Modal like this:

render() {

 const bg = {
   overlay: {
     background: "#FFFF00"
   }
 };

 return (
  <div className="childDiv">
    <Modal open={open} onClose={this.onCloseModal} center styles={bg} }}>
        <p>Your Modal Content</p>
    </Modal>
  </div>
 )

}

But wait. Why create an extra object when we can just write the styles directly instead like this:

<Modal open={open} onClose={this.onCloseModal} center styles={background: "#FFFF00"}>
    <p>Your Modal Content</p>
</Modal>

The above approach won't work even though it looks like it's doing the same thing as my code and that is because you can't directly specify styles inline on react-responsive-modal. You need to place the styles in an object first and then reference the styles prop to that object.

You can however create the object within the styles prop itself by doing this:

<Modal open={open} onClose={this.onCloseModal} center styles={{ overlay: { background: "#FFFF00" } }}>
    <p>Your Modal Content</p>
</Modal>

But it is recommended that you define objects outside and then reference it inside the styles prop as shown above.

I am assuming you want to set the opacity of the modal background...

Set the opacity via CSS

.modal-backdrop
{
    opacity:0.5 !important;
}

!important prevents the opacity from being overwritten - particularly from Bootstrap in this context.