React-active-modal：打开模式时更改背景颜色

Question

我使用react-responsive-modal 在我的应用程序中打开一些模式。当我打开模态时，有一个叠加效果会使模态后面的背景变暗。有什么方法可以使背景变暗100％或为背景设置任何颜色，以便在再次打开模态之前看不到模态打开之前存在的东西？

我在List<T>内为模式ModalComponent创建了一个新组件，当我单击按钮时会渲染该组件：

MainComponent：

ModalComponent

MainComponent：

render() {
 return (
  <div className="childDiv">
    <Modal
      open={open}
      onClose={this.onCloseModal}
      center
      classNames={{
        transitionEnter: styles.transitionEnter,
        transitionEnterActive: styles.transitionEnterActive,
        transitionExit: styles.transitionExitActive,
        transitionExitActive: styles.transitionExitActive
      }}
      animationDuration={1000}
    >
   ...

Answer 1

只需将具有overlay样式的对象分配给渲染中的变量bg，然后使用styles道具在Modal中引用该对象即可。像这样：

render() {

 const bg = {
   overlay: {
     background: "#FFFF00"
   }
 };

 return (
  <div className="childDiv">
    <Modal open={open} onClose={this.onCloseModal} center styles={bg} }}>
        <p>Your Modal Content</p>
    </Modal>
  </div>
 )

}

---

但是请等待。当我们可以直接编写样式而不是这样时，为什么还要创建一个额外的对象：

<Modal open={open} onClose={this.onCloseModal} center styles={background: "#FFFF00"}>
    <p>Your Modal Content</p>
</Modal>

上述方法即使看起来和我的代码在做同样的事情也行不通，这是因为您不能直接在react-responsive-modal上内联指定样式。您需要先将样式放在对象中，然后将styles属性引用到该对象。

---

您可以通过以下操作在styles道具本身中创建对象：

<Modal open={open} onClose={this.onCloseModal} center styles={{ overlay: { background: "#FFFF00" } }}>
    <p>Your Modal Content</p>
</Modal>

但是建议您在外部定义对象，然后在styles道具内部引用它，如上所示。

Answer 2

您可以通过Modal的样式道具更改叠加层的CSS

<Modal animationDuration={1000} styles={{ modal: {}, overlay: { background: "#ccc" } }} closeIconSize={16} open={modalOpen} onClose={this.onCloseModal} center > 
    Your Code Here...
</Modal>

Please see the full documentation of react-responsive-modal here

Answer 3

您需要定位并覆盖overlay类，例如

<Modal style={{ overlay: { background: 'black' }} />

文档here中显示了另一种实现方法，例如

<Modal classNames={{ overlay: { background: 'black' }} />