Reactjs 如何在父容器中显示模态

我的应用程序中有一个小的子窗口，如

div

，我需要在子窗口中显示一个模式，而不是整个视口

因此，模态的背景应该只覆盖子窗口，而不是整个屏幕

---

我使用的是material ui，因此首选material ui固有的任何解决方案。

将

禁用门户添加到
并添加代码片段中给出的样式

由于某些原因，应用于root的样式无法通过
类
或
类名
工作，因此必须添加
样式
属性

import { makeStyles, DialogContent, Dialog } from '@material-ui/core';
import React from 'react';

const useStyles = makeStyles({
  root: {
    position: 'absolute',
  },
  backdrop: {
    position: 'absolute',
  },
});

interface ISubWindow {
  onClose: () => void;
  open: boolean;
}

const SubWindow: React.FC<ISubWindow> = ({onClose, open}) => {
  const classes = useStyles();

  return (
    <Dialog
      disablePortal
      onClose={onClose}
      open={open}
      fullWidth
      className={classes.root}
      classes={{
        root: classes.root,
      }}
      BackdropProps={{
        classes: { root: classes.backdrop },
      }}
      style={{ position: 'absolute' }}
    >
      <DialogContent />
    </Dialog>
  );
};

export default SubWindow;

从'@material ui/core'导入{makeStyles，DialogContent，Dialog}；
从“React”导入React；
const useStyles=makeStyles({
根目录：{
位置：'绝对'，
},
背景：{
位置：'绝对'，
},
});
界面子窗口{
onClose:（）=>无效；
开放：布尔；
}
常量子窗口：React.FC=（{onClose，open}）=>{
const classes=useStyles（）；
返回(
);
};
导出默认子窗口；
您有什么想法可以分享吗？到目前为止，你取得了什么成就？我认为你还需要与风格相结合，而不仅仅是js问题。
div
的样式必须像其父窗口中的“包含”一样，而不是完整窗口。如果要实现这一点，您需要使用CSS。我不认为MaterialUI提供了添加父组件以显示模态的方法。