React Admin - 如何创建一个大的模式窗口

Question

我在 React-Admin 中打开一个对话框，供用户选择图像。问题是我希望这个对话框占据大部分屏幕，但 React Admin 使用一个名为 MuiDialog-paperWidthSm 的类打开该模式。这将宽度限制为 600px，并且 fullWidth 属性的应用不会影响这一点。

我尝试设置自定义属性，虽然这会增加模式的内部尺寸，但会导致水平滚动而不是更宽的窗口。

这是模态组件：

import React from "react";
import { Button, Toolbar, useGetList } from "react-admin";
import { makeStyles } from "@material-ui/core/styles";
import IconClose from "@material-ui/icons/CloseSharp";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
import ArcImageGrid from "../arcimages/ArcImageGrid";

const CustomToolbar = (props) => (
  <Toolbar {...props} className={useStyles().customToolbar}></Toolbar>
);

const useStyles = makeStyles({
  button: {
    marginLeft: "20px",
    height: "100%",
    marginTop: "1.25em",
    minWidth: "200px"
  },
  closeButton: {
    color: "#000000"
  },
  customToolbar: {
    display: "flex",
    justifyContent: "space-between",
    backgroundColor: "white",
    margin: "0px",
    padding: "0px",
    borderBottom: "1px solid #ECEFF1"
  },
  customFooter: {
    backgroundColor: "#ECEFF1",
    borderTop: "1px solid #BBC1C4"
  },
  arcEditButton: {
    color: "#585858",
    borderColor: "#585858",
    marginRight: "1em"
  },
  modalWindow: {
    maxWidth: "1400px !important",
    minWidth: "1400px !important"
  }
});

const ImageSelectionModal = ({ handleCloseClick, showDialog }) => {
  const handleSaveClick = () => {};

  const { data, loading, error } = useGetList("arcimage");

  return (
    <Dialog
      open={showDialog}
      onClose={handleCloseClick}
      aria-label="Add Media"
      className={useStyles().modalWindow}
      fullWidth
    >
      <CustomToolbar className={useStyles().modalWindow}>
        <DialogTitle
          styles={{ justifyContent: "space-between" }}
          className={useStyles().modalWindow}
        >
          Add Media
        </DialogTitle>
        <Button onClick={handleCloseClick}>
          <IconClose className={useStyles().closeButton} />
        </Button>
      </CustomToolbar>

      <DialogContent className={useStyles().modalWindow}>
        {loading && <h2>Your images are loading</h2>}
        {!loading && <ArcImageGrid imageData={data} />}
        {error && <h2>There was an error loading your images</h2>}
      </DialogContent>

      <DialogActions className={useStyles().customFooter}>
        <Button
          label="Edit Image in Arc"
          variant={"outlined"}
          onClick={() => {}}
          className={useStyles().arcEditButton}
        />
        <Button label="Apply" variant={"outlined"} onClick={handleSaveClick} />
      </DialogActions>
    </Dialog>
  );
};

export default ImageSelectionModal;

Answer 1

出色地。我最终弄清楚了。您必须将这两个道具添加到对话框窗口中。

fullWidth
maxWidth="xl"

您也可以在MaxWidth属性中添加“ SM”，“ MD”或“ LG”