编辑 React 组件的 CSS

Question

我正在使用一个反应组件react-awesome-modal，如下所示。

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

现在我想为这个 Modal 组件添加一个新样式 overflow-y:scroll。

我试过这样做，但没有成功：

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

有什么方法可以将属性应用到这个组件。

PS：我曾尝试使用 chrome Devtool（检查元素）应用此属性。在那里，我能够看到用于该组件的完整 CSS，因此我能够轻松更新它（参见图片中的最后一行）

Answer 1

你可以尝试在<Modal />下插入一个div元素，然后设置这个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，获取<Modal />的DOM，并更改<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>
       )
   }
}