MUI 4 自定义Dialog样式：覆盖PaperProps、BackdropProps等

组件实现代码 #

AlertDialog 组件 #

import React from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { Typography } from "@material-ui/core";
import { useNavigate } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";

const useAlertDialogStyles = makeStyles(() => ({
  dialogContentRoot: {
    padding: "0px",
  },
}));

export function AlertDialog({
  open,
  setOpen,
  onApprove,
  data,
  dialogTitle,
  dialogContent,
  dialogFooter,
}) {
  const navigate = useNavigate();
  const classes = useAlertDialogStyles();

  const handleApproveClick = () => {
    if (onApprove) {
      onApprove();
    }
    setOpen(false);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        PaperProps={{
          style: {
            backgroundColor: "transparent",
            boxShadow: "none",
            width: "621px",
            maxWidth: "700px",
          },
        }}
        BackdropProps={{
          style: {
            backgroundColor: "rgba(17, 7, 22, 0.50)",
            backdropFilter: "blur(35px)",
          },
        }}
      >
        {dialogTitle()}
        <DialogContent classes={{ root: classes.dialogContentRoot }}>
          {dialogContent(setOpen)}
        </DialogContent>
        <DialogActions style={{ justifyContent: "center" }}>
          {dialogFooter ? (
            dialogFooter(handleClose)
          ) : (
            <>
              <button
                className="rejectBtnDetailsAccordion"
                onClick={handleClose}
              >
                No
              </button>
              <button
                className="approveBtnDetailsAccordion"
                onClick={handleApproveClick}
              >
                Yes
              </button>
            </>
          )}
        </DialogActions>
      </Dialog>
    </div>
  );
}

NewPageLoader 组件 #

import React from "react";
import { AlertDialog } from "../AlertDialog";
import { ReactComponent as HourGlassLoader } from "../../../assets/icons/hourGlassLoader.svg";

export const NewPageLoader = ({ showLoader }) => {
  return (
    <>
      <AlertDialog
        open={true}
        dialogTitle={() => {}}
        dialogFooter={() => {}}
        dialogContent={() => {
          return <HourGlassLoader />;
        }}
      />
    </>
  );
};

技术问题与解决方案 #

1. 如何覆盖Dialog的PaperProps、BackdropProps样式，以及传递通用自定义样式？ #

给AlertDialog新增可传入的props，接收自定义配置后与默认值合并，实现样式覆盖：

第一步：扩展AlertDialog的props定义

export function AlertDialog({
  open,
  setOpen,
  onApprove,
  data,
  dialogTitle,
  dialogContent,
  dialogFooter,
  paperProps = {},
  backdropProps = {},
  dialogProps = {},
}) {
  // 原有逻辑不变
}

第二步：在Dialog组件中合并配置

<Dialog
  open={open}
  onClose={handleClose}
  aria-labelledby="alert-dialog-title"
  aria-describedby="alert-dialog-description"
  {...dialogProps} // 传递通用Dialog属性
  PaperProps={{
    style: {
      backgroundColor: "transparent",
      boxShadow: "none",
      width: "621px",
      maxWidth: "700px",
      ...paperProps.style, // 合并传入的Paper样式
    },
    ...paperProps, // 合并传入的其他PaperProps属性
  }}
  BackdropProps={{
    style: {
      backgroundColor: "rgba(17, 7, 22, 0.50)",
      backdropFilter: "blur(35px)",
      ...backdropProps.style, // 合并传入的Backdrop样式
    },
    ...backdropProps, // 合并传入的其他BackdropProps属性
  }}
>

第三步：父组件复用时传入自定义样式

<AlertDialog
  open={true}
  dialogTitle={() => {}}
  dialogFooter={() => {}}
  dialogContent={() => { return <HourGlassLoader />; }}
  paperProps={{
    style: { width: '400px', backgroundColor: 'rgba(255,255,255,0.1)' }
  }}
  backdropProps={{
    style: { backgroundColor: 'rgba(0,0,0,0.6)' }
  }}
  dialogProps={{ fullWidth: true }}
/>

2. 如何覆盖DialogContent、DialogActions的样式？ #

同样通过新增props接收自定义配置，合并到对应组件中：

第一步：扩展AlertDialog的props定义

export function AlertDialog({
  // 原有props
  dialogContentProps = {},
  dialogActionsProps = {},
}) {
  // 原有逻辑不变
}

第二步：在DialogContent、DialogActions中合并配置

<DialogContent 
  classes={{ 
    root: classes.dialogContentRoot, 
    ...dialogContentProps.classes // 合并传入的自定义classes
  }}
  {...dialogContentProps} // 传递其他DialogContent属性
>
  {dialogContent(setOpen)}
</DialogContent>
<DialogActions 
  style={{ 
    justifyContent: "center", 
    ...dialogActionsProps.style // 合并传入的内联样式
  }}
  classes={{ ...dialogActionsProps.classes }} // 合并传入的自定义classes
  {...dialogActionsProps} // 传递其他DialogActions属性
>

第三步：父组件复用时传入自定义样式

<AlertDialog
  // 其他props
  dialogContentProps={{
    style: { padding: '20px' },
    classes: { root: 'custom-content-root' }
  }}
  dialogActionsProps={{
    style: { justifyContent: 'flex-end', gap: '10px' },
    classes: { root: 'custom-actions-root' }
  }}
/>

3. 复用AlertDialog时如何定位MUI动态生成的.mui类？ #

可以通过以下几种方式处理：

• 利用MUI官方classes接口：MUI组件会暴露标准类名（如DialogContent的root、DialogActions的root），通过AlertDialog预留的dialogContentProps.classes、dialogActionsProps.classes props，父组件可传入自定义classes覆盖动态类。
• 全局样式+优先级选择器：给AlertDialog外层div添加自定义类（如custom-dialog），然后在全局样式中写：

.custom-dialog .MuiDialogContent-root {
  padding: 24px !important;
}

• 内联样式强制覆盖：内联样式优先级高于MUI动态类，直接通过style属性传入即可快速覆盖。
• 嵌套选择器定制：在自定义makeStyles中用嵌套选择器定位动态类，比如：

const useCustomStyles = makeStyles(() => ({
  dialogWrapper: {
    '& .MuiDialogActions-root': {
      padding: '16px 24px',
      borderTop: '1px solid #eee'
    }
  }
}));

然后给AlertDialog外层div添加该类：<div className={classes.dialogWrapper}>，父组件也可通过传入wrapperClass props添加额外定制类。

内容的提问来源于stack exchange，提问作者Sachin