编辑React组件的CSS

Question

我正在如下使用反应成分react-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

您可以尝试在<Modal />下插入一个div元素，然后设置该div的样式：

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

如果上述解决方案不起作用，请尝试creatRef，获取<Modal />的DOM，然后更改<Modal />的样式：（实际版本必须比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 (
           <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>
       )
   }
}