时间戳

首页 > 解决方案 > 如何使对话框出现在 Snackbar 上？

reactjs - 如何使对话框出现在 Snackbar 上？

问题描述

Codesandbox：https ://codesandbox.io/s/elegant-wind-mv842

从沙盒中可以看出，我将 Notistack 用于小吃店。我也想使用 MUI 对话框，但 Snackbars 出现在对话框上方，这是我不想要的。有没有办法让对话框出现在小吃栏上，而不关闭它们？

  <div>
    <SnackbarProvider maxSnack={3}>
      <MessageButtons />
    </SnackbarProvider>
    <SimpleDialogDemo />
  </div>

是我在演示中制作的唯一组件，足以看到问题。

标签： reactjsmaterial-uinotistack

解决方案

只需减少 notistack 的 z-index，例如：

const useStyles = makeStyles((theme) => ({
     snackbar: {
        zIndex: '10 !important',
     }
}));

并提供合适的道具SnackbarProvider

 <SnackbarProvider classes={{containerRoot: classes.snackbar}}>
   ...
 </SnackbarProvider>

推荐阅读