MaterialUI 的<Dialog> 组件中，open 根据 faild success 不同的值，返回不同颜色的dialog 框

根据不同状态值（如 failed 和 success）渲染不同颜色的 Material-UI <Dialog>，可以使用 Dialog 的 style 属性或自定义 Dialog 的 PaperProps 来控制其外观。可以通过传入状态（failed 或 success）动态设置不同的背景颜色或其他样式。

示例代码

import React, { useState } from 'react';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

function StatusDialog({ open, onClose, status }) {
  // 根据不同状态设置 Dialog 样式
  const getDialogStyle = () => {
    switch (status) {
      case 'success':
        return {
          backgroundColor: '#4caf50', // 绿色，表示成功
          color: 'white'
        };
      case 'failed':
        return {
          backgroundColor: '#f44336', // 红色，表示失败
          color: 'white'
        };
      default:
        return {
          backgroundColor: '#ffffff', // 默认白色
          color: 'black'
        };
    }
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      PaperProps={{
        style: getDialogStyle() // 设置 Dialog 样式
      }}
    >
      <DialogTitle>{status === 'success' ? 'Success' : 'Failed'}</DialogTitle>
      <DialogContent>
        {status === 'success' ? 'Operation was successful!' : 'Operation failed! Please try again.'}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} style={{ color: 'white' }}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

function App() {
  const [open, setOpen] = useState(false);
  const [status, setStatus] = useState('');

  const handleOpenDialog = (newStatus) => {
    setStatus(newStatus);
    setOpen(true);
  };

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

  return (
    <div>
      <Button onClick={() => handleOpenDialog('success')} variant="contained" color="primary">
        Open Success Dialog
      </Button>
      <Button onClick={() => handleOpenDialog('failed')} variant="contained" color="secondary">
        Open Failed Dialog
      </Button>
      
      <StatusDialog open={open} onClose={handleCloseDialog} status={status} />
    </div>
  );
}

export default App;

代码详解

1. getDialogStyle 函数：根据 status 的不同值（success 或 failed），返回不同的样式，包括背景颜色和字体颜色。success 状态时，返回绿色背景，failed 时返回红色背景。

2. Dialog 组件：

   • 使用了 PaperProps 传递动态样式，以改变 Dialog 的背景颜色。
   • 根据状态的不同，动态地设置 DialogTitle 和 DialogContent 的内容。

3. 按钮触发：

   • handleOpenDialog 函数根据用户点击的按钮设置 status 的值，然后打开 Dialog。
   • status 控制 Dialog 显示的内容以及背景颜色。

总结

通过这种方式，可以根据状态 (failed 和 success) 动态调整 Material-UI 的 Dialog 样式，让用户根据颜色来直观识别操作结果。