Question

这是对话框打开时的样子，它的黑色背景

代码：

export default function PostList() {


const columns = [
    { field: "_id", headerName: "ID", width: 90 },
    {
      field: "action",
      headerName: "Action",
      width: 150,
      renderCell: (params) => {
        return (
          <div>
            <Link to={"/post/" + params.row._id}>
              <button>Edit</button>
            </Link>
            <DeleteOutlineIcon
              onClick={handleClickOpenAD}
            />
            
            <Dialog
                    open={openAD}
                    onClose={handleCloseAD}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description">
                <DialogTitle id="alert-dialog-title">
                    {"Are you sure you want to delete this post?"}
                </DialogTitle>
                <DialogActions>
                    <Button onClick={handleCloseAD}>Disagree</Button>
                    <Button onClick={() => handleDelete(params.row._id)} autoFocus>
                        Agree
                    </Button>
                </DialogActions>
            </Dialog>
            
          </div>
        );
      },
    },
  ];
return (
<>             
            <DataGrid
                rows={posts}
                getRowId={(row) => row._id}
                disableSelectionOnClick
                columns={columns}
                pageSize={8}
                checkboxSelection
                />
</>

):

};

我有同样的问题，我发现一些有趣的东西。就我的情况而言，当您单击按钮的某些原因时，它将打开背景多次，就像数据网格中的按钮数量一样。

这里我有11个按钮，因此打开了11个背景：

这只是一个按钮：

Answer 1

因此，在所有按钮和所有按钮上都必须在所有按钮上打开的所有按钮之间必须有一些计算 Edit： 我发现您不应该将对话框放在数据杂志中。设立，您应该将其放在数据杂志表下方，然后从数据杂志中传递所需的值，这样的状态如下：

  const [openUserDialog, setOpenUserDialog] = useState(false);
  const [deleteRowId, setDeleteRowId] = useState<string>("");

...

  const columns: GridColDef[] = [
    {
      field: "",
      headerName: "Akcje",
      width: 350,
      sortable: false,
      filterable: false,
      hideable: false,
      renderCell: (params) => (
        <>
          <Button
            variant="contained"
            style={{
              backgroundColor: theme.colors.blue01_active,
            }}
            onClick={() => {
              // return navigate(urlOperator.ordersDetails);
            }}
          >
            Edytuj
          </Button>

          <Button
            variant="contained"
            style={{
              marginLeft: "10px",
              backgroundColor: "red",
            }}
            onClick={() => {
              setOpenUserDialog(true);
              setDeleteRowId(params.row.id);
            }}
          >
            Usuń
          </Button>
          

          <Button
            variant="contained"
            style={{
              marginLeft: "10px",
              backgroundColor: "green",
            }}
            onClick={() => {
              // return navigate(urlOperator.ordersDetails);
            }}
          >
            Zmień hasło
          </Button>
        </>
      ),
    },

...

return (
    <UsersContainer>
      <StyledTable
        // getRowId={(row) => row?.numer_zamowienia}
        rows={rows}
        columns={columns}
        // pageSize={5}
        // rowsPerPageOptions={[5]}
        // autoHeight
        autoPageSize
        // onRowClick={() => navigate(url.operatorOrdersDetails)}
      />
      
      <StyledDialog
            open={openUserDialog}
            setOpen={setOpenUserDialog}
            confirmFunction={() =>
              // DeleteUser.mutate({
              //   id_uzytkownik: deleteRowId
              // })
              console.log(deleteRowId)
            }
            dialogContent="Czy na pewno chcesz usunąć tego użytkownika?"
          />
    </UsersContainer>
  );
};

在我的情况下，这可以防止它多次打开

您可以通过

BackdropProps

传递样式，因此代码看起来像：

export default function PostList() {
  const columns = [
    { field: "_id", headerName: "ID", width: 90 },
    {
      field: "action",
      headerName: "Action",
      width: 150,
      renderCell: (params) => {
        return (
          <div>
            <Link to={"/post/" + params.row._id}>
              <button>Edit</button>
            </Link>
            <DeleteOutlineIcon
              onClick={handleClickOpenAD}
            />

            <Dialog
              open={openAD}
              onClose={handleCloseAD}
              aria-labelledby="alert-dialog-title"
              aria-describedby="alert-dialog-description">
              BackdropProps ={{ style: { backgroundColor: 'transparent' }, }}
              <DialogTitle id="alert-dialog-title">
                {"Are you sure you want to delete this post?"}
              </DialogTitle>
              <DialogActions>
                <Button onClick={handleCloseAD}>Disagree</Button>
                <Button onClick={() => handleDelete(params.row._id)} autoFocus>
                  Agree
                    </Button>
              </DialogActions>
            </Dialog>

          </div>
        );
      },
    },
  ];
  return (
    <>
      <DataGrid
        rows={posts}
        getRowId={(row) => row._id}
        disableSelectionOnClick
        columns={columns}
        pageSize={8}
        checkboxSelection
      />
    </>

  )

};

我面临着同样的问题，但由于不同的原因。我的初学者反应，尾风和材料尾风。 我刚刚发现通过对话框自动生成的元素作为背景或背景为此类别

<div class="grid place-items-center fixed w-screen h-screen bg-black bg-opacity-60 backdrop-blur-sm" style="opacity: 1;">

Answer 2

I发现

bg-black

是由CSS汇总的，但不是。
对我来说似乎是版本问题，因为我是初学者，所以我只是在这样的index.css中定义了自己的CSS。

bg-opacity-60

它只是以非常粗略的方式解决了问题。
    

Answer 3