Snackbar通过MaterialUI在对话框上

Question

我将React与Material UI库一起使用，并且具有以下组件层次结构：

<RootContainer>
  <SnackBar />
  <HomeContainer>
    <LoginModal />
  </HomeContainer>
</RootContainer>

我的问题是，即使Snackbar的zIndex增加到，它也会显示在LoginModal的下面9999。

将Snackbar 放置在模态（或更确切地说，模态的背景）上的正确方法是什么？

Answer 1

我发现的最好的方法是使用 Portal 来包裹 Snackbar 组件 https://material-ui.com/api/portal/ 例如，假设你有一个 Snackbar 类在对话框打开时被触发

<Portal>
<SnackBar/> 
<Portal/>

这样你就可以在 Dialog 的不透明背景之上获得一个 Snackbar

Answer 2

您使用的是哪个版本的material-ui？我无法在最新的 v1-beta 中重现此内容： https: //codesandbox.io/s/084v1z2qn

我也尝试使用 v0.x 重现此内容，但无济于事。

如果您使用的是 v0.x，请检查您的主题。 Snackbar使用属性中定义的值zIndex（请参阅实现）。从默认值中，您可以看到snackbar高于modal.

theme.zIndex.snackbar检查和的值theme.zIndex.modal。Snackbar 应该更高。如果不是这种情况，则您已经从默认主题中自定义了主题，并且可以简单地更改您的主题。

如果主题看起来正确，请检查您应用于对话框、Snackbar、模态等的样式和类。我提到这一点是因为您的问题提到尝试将 Snackbar 设置z-index为999. 主题默认modal为1300，因此问题中指定的 值999太低。如果你搞乱了z-index，你就不再依赖主题配置，所以你的错误可能就在那里。

由于默认情况下，material-ui 的两个发行分支都处理 z-index，并且此问题无法轻松重现，因此我很确定问题出在您的样式中。

请随意包含一个带有可复制案例的代码和盒子，我会再看一下。