![](/img/trans.png)
[英]React-google-recaptcha does not appear in the modal when the component is rendered
[英]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")
);
}
组件的 children 属性将包含工具提示。 或者它实际上可能是孙子。
但无论哪种方式,它都应该出现,不是吗?
.MuiTooltip-popper {
z-index: 9999999 !important;
}
尽管我讨厌使用!important
,但这对我有用。
您也可以通过 mui 主题覆盖来设置它。
export default function ThemeProvider({ children }: Props) {
const theme = createTheme({
zIndex: { tooltip: 99999 },
});
return (
<MUIThemeProvider theme={theme}>
{children}
</MUIThemeProvider>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.