javascript - 反应：出现 Material-UI 对话框时模糊背景

Question

出现 MUI 对话框时，有什么方法可以模糊背景内容吗？（默认操作是使背景变暗，但我需要对其进行模糊处理）。这就是我要找的东西：

标签： javascriptreactjsmaterial-ui

Answer 1

解决此问题的一种方法是在对话框背景上使用背景过滤器，它可以模糊背景。backgroundFilter css 属性是一个相对较新的 css 功能，但它在 Chrome、Edge、Samsung Internet 和 Safari 上运行良好。目前它不适用于 Firefox。但也许这适合你？这是一个代码示例：

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>
  );
}

材质 UI 5 的更新

在即将发布的Material UI 5版本中，您可以使用如下样式的组件：

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>
    </>
  );
}

或者像这样使用 sx 道具：

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>
    </>
  );
}