React 快餐栏显示在弹出窗口后面答案

【问题标题】：React snackbar is showing behind the poupReact 快餐栏显示在弹出窗口后面
【发布时间】：2021-09-01 23:04:30
【问题描述】：

我正在使用 react-notifications-component 小吃店，但我遇到了一个问题，即我的小吃店出现在弹出窗口的后面。有没有办法申请zindex？

使用。但没用

   store.addNotification({
        // title: "Error",
        message: 'Please select option first',
        type: 'danger', // 'default', 'success', 'info', 'warning','danger'
        container: 'top-right', // where to position the notifications
        dismiss: {
          duration: 1000000
        }
      })

【问题讨论】：

是的，你可以使用css
如何实现内联CSS？？ @madalinivascu

标签： javascript reactjs ecmascript-6 material-ui frontend

【解决方案1】：

在实际呈现notification 的函数中，您可以创建一个css 文件，遵循您使用的任何库的约定，例如MaterialUI，或者直接使用inline-styling。

无论如何，你需要给它z-index 样式。很难说应该把 style 放在哪里，因为你发布的代码很少。

最简单但不是最干净的方法是使用inline-styling。只需找到Notification 组件，然后添加：

<Notification style={{ zIndex: 1000 }}> // Or any number that is necessary to make the Snackbar end up on top.
    ...
</Notification>

【讨论】：

没有通知组件。上面的代码在 else 块中。而已。如何在那里实现内联 CSS？？
我假设您有某种 Snackbar 或 Notification 组件？实际呈现通知的代码在哪里？您能否使用呈现通知的特定代码更新您的问题？我指的是实际的 JSX
好的...我做了 ...但没用
如果您可以将 .css 文件导入该组件，请设置 ` 然后在 css 中创建 .notification {z-index: 999999999 !important} 这可能有效，很难说。我建议你在浏览器中打开你的页面，然后检查弹出窗口，看看它的 z-index 是什么，然后让snackbar 有更高的 z-index
如果您使用的组件不支持样式，另一种选择是直接设置style={{ zIndex: 99999 }}，而不是设置className={{ zIndex: 999999 }}。