reactjs - 当 dimmer 设置为 {'blurring'} 时，在 Semantic-UI 模态后面显示 Toast 消息

Question

我将reachjs 中的toast 消息与语义ui 一起使用。问题是当调光器设置为模糊时，吐司消息显示在模态后面。否则，它会按预期显示在页面顶部。

你有同样的问题吗？如何纠正？

谢谢你的帮助！

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

例子

标签： reactjstoast

Answer 1

为你的 toast 定义一个 CSS 规则filter: none，或者像这样的一般规则

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