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)

did you try without the curly brackets? style="overflow-y":"scroll". — MadeInDreams
– MadeInDreams, Commented Apr 7, 2020 at 19:29
Getting error Identifier expected. brackets are necessary. — Kapil Khandelwal
– Kapil Khandelwal, Commented Apr 7, 2020 at 19:32
You could try use ref to get the DOM of component <Modal>, then change the style of the DOM. — Kuo-hsuan Hsu
– Kuo-hsuan Hsu, Commented Apr 7, 2020 at 19:40
Fyi this component is deprecated: shibe97.github.io/react-awesome-modal. Also, looks like <Modal>'s implementation does not render your style prop. — Tony M
– Tony M, Commented Apr 7, 2020 at 19:41
@Kuo-hsuanHsu Can you please throw light on how to get the DOM of any component. — Kapil Khandelwal
– Kapil Khandelwal, Commented Apr 7, 2020 at 19:47

Kapil Khandelwal · Accepted Answer · 2020-04-07 20:38:40Z

2

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>
       )
   }
}

edited Apr 7, 2020 at 20:38

Kapil Khandelwal

1,17612 silver badges25 bronze badges

answered Apr 7, 2020 at 20:21

Kuo-hsuan Hsu

6871 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kapil Khandelwal Over a year ago

The first solution worked like a charm. Didn't tried the second approach. Thanks a lot!!!

Collectives™ on Stack Overflow

Edit CSS of React Components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related