Material UI 在自定义模态组件内呈现时不显示工具提示
Material UI Tooltip does not appear when rendered inside of a custom Modal component
我的自定义模态组件是这样定义的:
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")
);
}
组件的子项 属性 将包含工具提示。也可能真的是孙子
但无论如何,它应该会出现,不是吗?
.MuiTooltip-popper {
z-index: 9999999 !important;
}
尽管我很讨厌使用 !important
,但这对我来说很有效。
我的自定义模态组件是这样定义的:
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")
);
}
组件的子项 属性 将包含工具提示。也可能真的是孙子
但无论如何,它应该会出现,不是吗?
.MuiTooltip-popper {
z-index: 9999999 !important;
}
尽管我很讨厌使用 !important
,但这对我来说很有效。