CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Ali Tourani
Ali Tourani

Reputation: 1247

React: Blur background when Material-UI Dialog appeared

Is there any way I can blur the background content when an MUI dialog appears? (the default action is darkening the background, but I need to blur it). Here's what I am looking for:

Upvotes: 8

Views: 32365

Answers (2)

digibake
digibake

Reputation: 478

One way to solve this is to use a backdropFilter on the dialog backdrop, which can blur the background. The backdropFilter css property is a relatively new css feature but it works well on Chrome, Edge, Samsung Internet and Safari. It doesn't work on Firefox at this time. But maybe that's suitable for you? Here's a code example:

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

const useStyles = makeStyles((theme: Theme) => ({
  backDrop: {
    backdropFilter: "blur(3px)",
    backgroundColor:'rgba(0,0,30,0.4)'
  },
}));

export default function ExampleDialogComponent() {
  const classes = useStyles();
  return (
    <Dialog
      open={true}
      BackdropProps={{
        classes: {
          root: classes.backDrop,
        },
      }}
      onClose={() => {}}
    >
      <DialogContent style={{ textAlign: "center" }}>
          <Typography variant="body1">Example Dialog</Typography>
      </DialogContent>
    </Dialog>
  );
}

Update for Material UI 5

In the upcoming version of Material UI 5, you could use a styled component like this:

import Box from "@material-ui/core/Box";
import { experimentalStyled as styled } from "@material-ui/core/styles";
import Dialog, { DialogProps } 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 Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";

const BlurryDialog = styled(Dialog)<DialogProps>(({ theme }) => ({
  backdropFilter: "blur(5px)",
  // other styles here...
}));

export default function ExampleNextDialog() {
  return (
    <>
      <CssBaseline />
      <BlurryDialog fullWidth onClose={() => {}} open={true} maxWidth="xs">
        <DialogTitle>Example Dialog</DialogTitle>
        <DialogContent>Example Content Here</DialogContent>
        <DialogActions>
          <Button>ooooh.</Button>
        </DialogActions>
      </BlurryDialog>
      <Box
        sx={{
          minHeight: "100vh",
          background:
            "url(https://source.unsplash.com/random) no-repeat center center",
          backgroundSize: "cover",
        }}
      ></Box>
    </>
  );
}

Or use the sx prop like this:

import Box from "@material-ui/core/Box";
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 Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";

export default function ExampleNextDialog() {
  return (
    <>
      <CssBaseline />
      <Dialog
        fullWidth
        onClose={() => {}}
        open={true}
        maxWidth="xs"
        sx={{
          backdropFilter: "blur(5px)",
          //other styles here
        }}
      >
        <DialogTitle>Example Dialog</DialogTitle>
        <DialogContent>Example Content Here</DialogContent>
        <DialogActions>
          <Button>ooooh.</Button>
        </DialogActions>
      </Dialog>
      <Box
        sx={{
          minHeight: "100vh",
          background:
            "url(https://source.unsplash.com/random) no-repeat center center",
          backgroundSize: "cover",
        }}
      ></Box>
    </>
  );
}

Upvotes: 22

demkovych
demkovych

Reputation: 8827

You need to add some class to your content root block after dialog opens and add filter styles for that class: filter: blur(3px);

Upvotes: 3

Related Questions