我将 React 与 Material UI 库一起使用，并且具有以下组件层次结构：
<RootContainer>
<SnackBar />
<HomeContainer>
<LoginModal />
</HomeContainer>
</RootContainer>
我的问题是 Snackbar 显示在 LoginModal 下方，即使它的 zIndex 增加到 9999。
将 Snackbar 放在模态框（或更准确地说，放在模态框的背景上）的正确方法是什么？
【问题讨论】：
标签： reactjs material-ui
我发现最好的方法是使用 Portal 包裹 Snackbar 组件 https://material-ui.com/api/portal/.
只需将您的小吃店渲染为门户的子项即可：
<Portal>
<SnackBar/>
<Portal/>
这样你可以在对话框的不透明背景上获得一个 Snackbar
【讨论】：
您使用的是哪个版本的 material-ui？我无法在最新的 v1-beta 中重现这一点：https://codesandbox.io/s/084v1z2qn
我也尝试过用 v0.x 重现此内容，但无济于事。
如果您使用的是 v0.x，请检查您的主题。 Snackbar 使用在zIndex 属性中定义的值（请参阅implementation）。从defaults可以看出snackbar高于modal。
检查theme.zIndex.snackbar 和theme.zIndex.modal 的值。小吃店应该更高。如果不是这种情况，您已经自定义了默认主题，并且可以简单地更改您的主题。
如果主题看起来正确，请检查您应用于 Dialog、Snackbar、Modal 等的样式和类。我提到这一点是因为您的问题提到了将 Snackbar 的 z-index 设置为 999 的尝试。主题默认modal 为1300，因此您的问题中指定的999 的值太低。如果你搞砸了z-index，你不再依赖主题配置，所以你的错误可能就在那里。
由于 material-ui 的两个发布分支都默认处理 z-index 并且这个问题不容易重现，我很确定问题出在你的样式上。
请随意将codesandbox 包含在可重现的案例中，我会再看一看。
【讨论】：
隐藏在抽屉背景后面的 Snackbar 也有同样的问题。 通过在 React DOM 中呈现主视图之后放置 Snackbar 组件来修复此问题。在我的应用程序中，它看起来像这样：
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<MuiThemeProvider theme={theme}>
<IntlProvider locale={lang} messages={messages[lang]}>
<React.Fragment>
{configRoutes()}
<SnackbarMsg
open={props.snackbarOpen}
msg={props.snackbarMsg}
success={props.snackbarSuccess}
/>
</React.Fragment>
</IntlProvider>
</MuiThemeProvider>
</MuiPickersUtilsProvider>
为此创建和使用 HOC 应该没问题，我可能会这样做。
【讨论】：
原因是因为 modals 是 root 的兄弟姐妹。 HTML 分层是分层的，因此即使对话框的 z-index 更高，也不会用于比较： https://github.com/mui-org/material-ui/issues/12044
我很可能会在我的对话框中添加一个snackbar，但如果有人对全局snackbar 有一个好的解决方案，请告诉我。
【讨论】：