I trying to show an alert dialog whenever a user is tapping on a button, the button is called inside a material ui DataGrid, the problem i’m facing right now is that the background of the alert dialog is black when it should be transparent.
This how the button clicked on looks on the App (Circled by green)
This how the dialog looks like when it’s open, with it’s black background
The Code:
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
/>
</>
):
};
>Solution :
You can pass the styling with BackdropProps, so the code will look like:
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
/>
</>
)
};