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

根据不同状态值(如 failedsuccess)渲染不同颜色的 Material-UI <Dialog>,可以使用 Dialogstyle 属性或自定义 DialogPaperProps 来控制其外观。可以通过传入状态(failedsuccess)动态设置不同的背景颜色或其他样式。

示例代码

jsx 复制代码
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 的不同值(successfailed),返回不同的样式,包括背景颜色和字体颜色。success 状态时,返回绿色背景,failed 时返回红色背景。

  2. Dialog 组件

    • 使用了 PaperProps 传递动态样式,以改变 Dialog 的背景颜色。
    • 根据状态的不同,动态地设置 DialogTitleDialogContent 的内容。
  3. 按钮触发

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

总结

通过这种方式,可以根据状态 (failedsuccess) 动态调整 Material-UIDialog 样式,让用户根据颜色来直观识别操作结果。

相关推荐
曼陀罗1 个月前
material-react-table中 ,<MaterialReactTable /> optimization
前端·material design
Mapmost8 个月前
一文带你了解Material, Texture Mapping, Shading, Shader
webgl·图形学·material design
xiaoyan20151 年前
flutter3-wechat:基于Flutter3.x+Dart3+Matetial3聊天App应用
flutter·dart·material design
路很长OoO1 年前
Compose LazyColum 字母指示器
android·android jetpack·material design
Will_Ai1 年前
Flutter应用的美学之旅:Material 3的一致与灵活
flutter·material design
FaceBlack1 年前
MD3——SearchView自定义背景
android·material design
Mr_万能胶1 年前
在 aosp 中启用 Material You design
android·架构·material design
彬sir哥1 年前
Android kotlin系列讲解之最佳的UI体验 - Material Design 实战
ui·google·kotlin·android studio·material design