元素在 Dialog Material UI React 中绝对定位

Question

我有对话框组件，其中有一个按钮（右下角），它显示另一个带有项目列表的 div。我面临的问题是列表正在 Dialog 组件内呈现并且它正在被裁剪。我设置了position: absolute、z-index 并将position: relative 设置为父级，但它不起作用。这是它的样子。任何有用的提示我将不胜感激。 1）在我点击按钮显示列表之前 2）点击按钮后。列表元素的突出显示的 CSS 属性

还有Dialog组件的代码：

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import { ProjectTreeWindow } from "../index";

const useStyles = makeStyles(theme => ({
  addTaskButton: {
    marginTop: 10
  },
  dialog: {
    width: "40%",
    maxHeight: 435
  },
  closeButton: {
    position: "absolute",
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500]
  },
  controlsWrapper: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
  }
}));

const AddQuickTaskDialog = props => {
  const classes = useStyles(props);
  const { open, close } = props;
  const [quickTaskDescription, setQuickTaskDescription] = useState("");
  const [textInputRef, setTextInputRef] = useState(null);
  const handleChangeQuickTaskDescription = event => {
    setQuickTaskDescription(event.target.value);
  };

  const handleAddQuickTaskSubmit = () => {
    alert("Quick task submitted");
    close(textInputRef);
  };

  return (
    <Dialog
      data-testid="add-task-quick"
      classes={{
        paper: classes.dialog
      }}
      maxWidth="lg"
      open={open}
      keepMounted
      onClose={() => {
        close(textInputRef);
      }}
      aria-labelledby="quick-task-dialog"
      aria-describedby="quick-task-dialog-description"
    >
      <DialogTitle id="quick-task-dialog-title">
        <Typography variant="h6">Quick Add Task</Typography>
        {close ? (
          <IconButton
            aria-label="close"
            className={classes.closeButton}
            onClick={() => {
              close(textInputRef);
            }}
          >
            <CloseIcon />
          </IconButton>
        ) : null}
      </DialogTitle>
      <DialogContent>
        <div className={classes.wrapper}>
          <OutlinedInput
            onChange={handleChangeQuickTaskDescription}
            inputRef={input => {
              setTextInputRef(input);
              return input && input.focus();
            }}
            fullWidth
            //   className={showAddTaskInput ? classes.show : classes.hide}
            placeholder="e.g. Take the dog out for a walk"
            inputProps={{ "aria-label": "add task" }}
          />
          <div className={classes.controlsWrapper}>
            <Button
              className={classes.addTaskButton}
              disabled={quickTaskDescription.length === 0}
              data-testId="quick-add-task-submit"
              // onClick={handleAddTaskSubmit}
              color="primary"
              onClick={handleAddQuickTaskSubmit}
            >
              Add Task
            </Button>
            <ProjectTreeWindow />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};
export default AddQuickTaskDialog;

对于 List 组件：

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import ListAltTwoToneIcon from "@material-ui/icons/ListAltTwoTone";
import IconButton from "@material-ui/core/IconButton";
import { CustomizedToolTip } from "../index";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import DoneTwoToneIcon from "@material-ui/icons/DoneTwoTone";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import FiberManualRecordTwoToneIcon from "@material-ui/icons/FiberManualRecordTwoTone";
import { useProjectsValue, useSelectedProjectValue } from "../../context";

const useStyles = makeStyles(theme => ({
  root: {
    position: "absolute",
    zIndex: 9999,
    top: 200,
    left: 0,
    display: "flex",
    flexDirection: "column",
    "&:hover $child": {
      visibility: "visible"
    }
  },
  wrapper: {
    position: "relative !important"
  },
  selected: {
    "& $child": {
      visibility: "visible !important"
    }
  },
  hidden: {
    visibility: "hidden"
  },
  listItemIcon: {
    minWidth: 30
  }
}));

const ProjectTreeWindowList = props => {
  const [textInputRef, setTextInputRef] = useState(null);
  const [typeProject, setTypedProject] = useState("");
  const classes = useStyles(props);
  const { projects } = useProjectsValue();

  return (
    <div className={classes.root}>
      <OutlinedInput
        // onChange={handleChangeQuickTaskDescription}
        inputRef={input => {
          setTextInputRef(input);
          return input && input.focus();
        }}
        placeholder="Type a project"
        inputProps={{ "aria-label": "select project" }}
      />
      <List>
        {projects &&
          projects.map((project, index) => (
            <ListItem
              onClick={() => {
                alert("move selected project to input");
              }}
              //   selected={active === project.projectId}
              button
              // classes={{
              //   root: classes.root,
              //   selected: classes.selected
              // }}
            >
              <ListItemIcon
                className={classes.listItemIcon}
                style={{ color: project.color }}
              >
                <FiberManualRecordTwoToneIcon />
              </ListItemIcon>
              <ListItemText primary={project.name} />
              <ListItemIcon
                className={`${classes.listItemIcon} ${classes.hidden}`}
              >
                <DoneTwoToneIcon />
              </ListItemIcon>
            </ListItem>
          ))}
      </List>
    </div>
  );
};

const ProjectTreeWindow = props => {
  const classes = useStyles(props);
  const [showProjectTreeWindow, setShowProjectTreeWindow] = useState(false);

  const handleShowProjectWindow = () => {
    setShowProjectTreeWindow(!showProjectTreeWindow);
  };
  const handleCloseProjectWindow = () => {
    setShowProjectTreeWindow(false);
  };

  return (
    <div className={classes.wrapper}>
      <CustomizedToolTip title="Select a project">
        <IconButton onClick={handleShowProjectWindow} aria-label="add-project">
          <ListAltTwoToneIcon />
        </IconButton>
      </CustomizedToolTip>
      {showProjectTreeWindow ? <ProjectTreeWindowList /> : null}
    </div>
  );
};
export default ProjectTreeWindow;

Answer 1

这是因为 position: relative 和 overflow-y: auto 来自 <Paper> 组件的组合。如果您覆盖此属性之一，它将不再被隐藏。

为此，<Dialog> 中有一个 PaperProps 属性。

例子：

<Dialog {...otherProps} PaperProps={{style: {position: 'static'} }}/>