Edit CSS of React Components

Question

I am using a react component react-awesome-modal as follows.

<Modal visible={this.state.visible}  width="850" height="450" effect="fadeInUp" onClickAway={() => this.closeModal()}>

Now I want to add a new style overflow-y:scroll to this Modal component.

I tried doing this, but it didn't worked:

<Modal visible={this.state.visible}  style={{"overflow-y":"scroll"}} width="850" height="450" effect="fadeInUp" onClickAway={() => this.closeModal()}>

Is there any way I can apply the property to this component.

PS: I had tried applying this property using chrome Devtool(Inspect element). In that, I am able to see the complete CSS that is used for this component, so I was able to update it easily (see the last line in the image)

Answer 1

You could try insert a div element under <Modal /> , then set the style of this div:

<Modal visible={this.state.visible} width="400" height="300" effect="fadeInUp" onClickAway={() => this.closeModal()}>
  <div style={{overflowY:"scroll", height:"300px"}}>
      <h1>Title</h1>
      <p>Some Contents</p>
      <a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
  </div>
</Modal>

If solution above doesn't work, then try creatRef, get DOM of <Modal />, and change the style of <Modal />: (React version must be newer than 16.3)

import React, { Component } from 'react';
import Modal from 'react-awesome-modal';

class Test extends React.Component {
   constructor(props) {
       super(props)
       this.modalRef = React.createRef()  //create Ref to get DOM
   }

  componentDidMount(){
       this.modalRef.current.style.overflowY = "scroll"   //change style of Modal DOM
  }

   render() {

       return (
          <div>
             <Modal visible={this.state.visible} width="400" height="300" effect="fadeInUp" onClickAway={() => this.closeModal()} ref={this.modalRef}>
                <div>
                    <h1>Title</h1>
                    <p>Some Contents</p>
                    <a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
                </div>
             </Modal>
          </div>
       )
   }
}