使用Mui的dialog组件实现移动端tab栏点击弹出弹窗

dialog组件是独立于dom树的，search和more对应2个div 先点击的会先挂载，后点击的后挂载，

切换变化的是visibility属性 先点击的div会被覆盖 即无法交互。尝试自定义属性display：none来处理即可

        <Dialog
          fullScreen
          open={open}
          onClose={handleClose}
          TransitionComponent={Transition}
          sx={{
            color: "#fff",
            zIndex: 4,
            "& .css-4wi5xv-MuiPaper-root-MuiDialog-paper": {
              backgroundImage: "none",
            },
            "& .css-yd13xw-MuiModal-root-MuiDialog-root": {
              display: "none !important",
            },
            "&.MuiDialog-root": {
              display: open ? null : "none !important",//2个dialog都要设置这个属性
            },
          }}
        >

  <Dialog
          fullScreen
          open={moreTabOpen}
          onClose={handleMoreTabClose}
          TransitionComponent={Transition}
          sx={{
            color: "#fff",
            zIndex: 4,
            "& .css-4wi5xv-MuiPaper-root-MuiDialog-paper": {
              backgroundImage: "none",
            },
            "&.MuiDialog-root": {
              display: moreTabOpen ? null : "none !important",//加上这一行 不打开这个tab就直接不渲染
            },
          }}
        >