在自定義模態組件內部呈現時，不會顯示 Material UI 工具提示

Question

以下是我的自定義模態組件的定義方式：

function Modal({ open, set_open, children }) {
  const modal_ref = useRef(null);
  useEffect(() => {
    if (open) {
      modal_ref.current.style.display = "block";
    } else {
      modal_ref.current.style.display = "none";
    }
  }, [open]);

  return ReactDom.createPortal(
    <div className="modal-container" ref={modal_ref}>
      <div className="modal-content">{children}</div>
    </div>,
    document.getElementById("root")
  );
}

組件的 children 屬性將包含工具提示。 或者它實際上可能是孫子。

但無論哪種方式，它都應該出現，不是嗎？

Answer 1

.MuiTooltip-popper {
    z-index: 9999999 !important;
}

盡管我討厭使用!important ，但這對我有用。

Answer 2

您也可以通過 mui 主題覆蓋來設置它。

export default function ThemeProvider({ children }: Props) {
  const theme = createTheme({
    zIndex: { tooltip: 99999 },
  });

  return (
    <MUIThemeProvider theme={theme}>
      {children}
    </MUIThemeProvider>
  );
}