React-responsive-modal: Change background-color when modal is open

Question

I use react-responsive-modal to open some modals within my react app. When i open the modal, there is an overlay effect that darkens the background behind the modal. Is there any way to darken the background for 100% or set any color for the background so i cant see the stuff which was there before the modal was opened until i close the modal again?

I created a new component for the modal ModalComponent within my MainComponent, which gets rendered when i click a button:

ModalComponent:

render() {
 return (
  <div className="childDiv">
    <Modal
      open={open}
      onClose={this.onCloseModal}
      center
      classNames={{
        transitionEnter: styles.transitionEnter,
        transitionEnterActive: styles.transitionEnterActive,
        transitionExit: styles.transitionExitActive,
        transitionExitActive: styles.transitionExitActive
      }}
      animationDuration={1000}
    >
   ...

MainComponent:

<div>
    <div className="outter" onClick={this.openModal.bind(this)}>
//Open Modal when clicking on this div
      <p className="arrival">Ankunft am Ziel: ~ {this.props.arrival} Uhr</p>
      <p className="price">max. {this.props.price} €</p>
      {this.state.open && (
        <BookingModalNew
          open={this.state.open}
          triggerCloseModal={this.closeModal.bind(this)}
          destination={this.props.destination}
          arrival={this.props.arrival}
          price={this.props.price}
        />
      )}
//Whole Stuff should not be visible while Modal is opened

Answer 1

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.