Редактировать CSS компонентов React

Question

Я использую компонент реагирования act-awesome-modal следующим образом.

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

Теперь я хочу добавить новый стиль overflow-y:scroll к этому модальному компоненту.

Я пытался сделать это, но это не сработало:

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

Есть ли способ применить свойство к этому компоненту.

PS: я пытался применить это свойство с использованием chrome Devtool (Inspect element). В этом я могу видеть полный CSS, который используется для этого компонента, поэтому я смог легко его обновить (см. Последнюю строку на изображении)

Answer 1

Вы можете попробовать вставить элемент div в <Modal />, а затем установить стиль этого 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>

Если указанное выше решение не работает, попробуйте creatRef, получите DOM <Modal /> и измените стиль <Modal />: (Версия React должна быть новее 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>
       )
   }
}