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

Posted 2023-02-22

【中文标题】React-responsive-modal：模式打开时更改背景颜色

【英文标题】：React-responsive-modal: Change background-color when modal is open

【发布时间】：2019-06-01 16:42:58

【问题描述】：

我使用react-responsive-modal 在我的反应应用程序中打开一些模式。当我打开模态框时，会出现一个叠加效果，使模态框后面的背景变暗。有什么方法可以将背景变暗 100% 或为背景设置任何颜色，这样在我再次关闭模态之前，我无法看到打开模态之前的内容？

我在MainComponent 中为模态ModalComponent 创建了一个新组件，当我单击按钮时会呈现该组件：

ModalComponent:

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
    >
   ...

主组件：

<div>
    <div className="outter" onClick=this.openModal.bind(this)>
//Open Modal when clicking on this div
      <p className="arrival">Ankunft am Ziel: ~ this.props.arrival Uhr</p>
      <p className="price">max. this.props.price €</p>
      this.state.open && (
        <BookingModalNew
          open=this.state.open
          triggerCloseModal=this.closeModal.bind(this)
          destination=this.props.destination
          arrival=this.props.arrival
          price=this.props.price
        />
      )
//Whole Stuff should not be visible while Modal is opened

【参考方案1】：

只需将带有overlay 样式的对象分配给渲染中的变量，例如bg，然后只需使用styles 属性在您的模态中引用该对象，如下所示：

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 prop里面引用，如上图。

【讨论】：

感谢您的评论。但它不起作用，这种尝试没有任何改变。我不知道为什么不，这对我来说似乎是因为我无法使用 css 或内联更改任何属性。

@Alex 在react-responsive-modal 的官方文档中推荐了上面显示的方法，所以我不确定它为什么不起作用。让我尝试用上面的代码创建一个演示小提琴。

是的，我不知道。在将其发布到此处之前，我还阅读了官方文档。可能是因为我只有在按下 div 按钮并且从不使用 modalComponent 中的打开方法时才在 mainComponent 中渲染模型？

@Alex 好的，我想通了。 1.您需要指定要添加自定义背景颜色的元素。在这里，我们想要定位overlay，所以我们需要在bg 对象中指定它。 2. 我们正在尝试覆盖background css 属性，而不是backgroundColor 属性，因此请在您的bg 对象中相应地更改它。检查此代码笔以获取上述实际示例：codesandbox.io/s/6llqk6x973

@Alex 您必须为该人打开另一个问题，否则该问题将被标记为“过于宽泛”。请将其标记为正确答案，如果它帮助您解决问题，请点赞:) 干杯！！

【参考方案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

【参考方案3】：

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

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

另一种方式是shown in the docs，例如

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

【讨论】：

感谢您的评论。但它不起作用，这种尝试没有任何改变。我不知道为什么不，这对我来说似乎是因为我无法使用 css 或内联更改任何属性。

你好@Alex，我认为这是因为缺少大括号，我编辑了这个问题让你知道。