编辑 CSS 个 React 组件

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

编辑 CSS 个 React 组件

Edit CSS of React Components

javascript

css

reactjs

react-component