Question

我正在使用React和Material UI库，并具有以下组件层次结构：

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

我的问题是Snackbar出现在LoginModal下面，即使它的zIndex增加到9999。

将Snackbar 放在模态上的正确方法是什么（或者更准确地说，是在Modal的背景下？

Answer 1

在抽屉的背景下隐藏着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应该没问题，我可能会选择它。

Answer 2

您使用的是哪种版本的材料？我无法在最新的v1-beta中重现这一点：https://codesandbox.io/s/084v1z2qn

我也试过用v0.x再现这个无效。

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

检查theme.zIndex.snackbar和theme.zIndex.modal的值。 Snackbar应该更高。如果不是这种情况，您可以根据默认情况自定义主题，只需更改主题即可。

如果主题看起来正确，请检查您已应用于Dialog，Snackbar，Modal等的样式和类。我提到这一点是因为您的问题提到尝试设置Snackbar的{{1}到z-index。主题默认为999到modal，因此您问题中指定的1300值太低。如果您与999混淆了，那么您不再依赖于主题配置，那么您的错误可能就在那里。

由于材料-ui的两个发布分支默认处理z-index并且这个问题不容易再现，我很确定问题出在你的样式中。

随意添加codesandbox一个可复制的案例，我会再看看。

Answer 3

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

<Portal>
<SnackBar/> 
<Portal/>

通过这种方式，您可以在对话框的不透明背景上获得一个Snackbar

使用MaterialUI在Dialog上使用Snackbar

3 个答案: