当调光器设置为 {'blurring'} 时，在语义 UI 模式后面显示的 Toast 消息

Question

我正在使用reachjs中的toast消息以及语义UI。问题是当调光器设置为模糊时，Toast 消息显示在模态后面。否则，它将按预期显示在页面顶部。

你有同样的问题吗？如何纠正这种情况？

感谢您的帮助！

  <Modal
    centered
    size={'large'}
    open={this.props.openVariationGeometry}
    onClose={() => this.props.closeVariationGeometryModal()}
    closeIcon
    dimmer={'blurring'}
  >
    <Header icon="cube" content={'Change the Gemetry of the Selected Variation.'} />
    <Modal.Content>
      <VariationGeometryForm />
    </Modal.Content>
  </Modal>

例

Answer 1

用 filter: none 为您的吐司定义一个 CSS 规则，或者像这样的一般规则

.toast-container {
  filter: none !important;
}

Answer 2

这是一个非常古老的问题，但我在这里结束寻找解决相同问题的方法，所以我写了下来。首先，正如这个问题所说，我发现用模态礼物展示吐司的唯一方法是将吐司容器放在模态内。这种方法有一个问题，你也可以看到模态下的"主要"吐司模糊。

后来我在这里找到了最终的解决方案。Toast 容器和模态都必须挂载在同一个 DOM 节点上（我用过#App）。

首先，您必须将 Toast 容器放在 App 组件中：

const App = () => (
    <div id='App'>
      <YourComponents />
      <ToastContainer
        className='dimmer toast-container' // 'dimmer' class is required to avoid blurring by modal
      />
    </div>
  
)

之后，您需要以下 css 规则：

.blurring.dimmable > .toast-container {
  // this prevents the toast from darkening by the modal
  background-color: unset;
}

最后，模态必须挂载在同一节点中：

  <Modal
    centered
    size={'large'}
    open={this.props.openVariationGeometry}
    onClose={() => this.props.closeVariationGeometryModal()}
    closeIcon
    dimmer={'blurring'}
    mountNode={document.getElementById('App')} // modal mounted on #App
  >
    <Header icon="cube" content={'Change the Gemetry of the Selected Variation.'} />
    <Modal.Content>
      <VariationGeometryForm />
    </Modal.Content>
  </Modal>