如何在mui/x-data-grid中渲染带内嵌文本/图标的彩色椭圆形单元格

你可以通过@mui/x-data-grid列配置的renderCell属性自定义单元格渲染逻辑，搭配MUI自带的Chip组件即可快速实现你需要的彩色椭圆形带文本/图标效果，具体实现逻辑如下：

• 提前定义单元格文本值和样式的映射规则，包含对应状态的背景色、文字颜色、展示图标、显示文本等配置
• 在对应列的配置项中添加renderCell方法，接收单元格的value参数，匹配你提前定义好的映射配置
• 返回对应配置的Chip组件即可，Chip组件原生支持圆角形态、图标插槽、自定义样式等能力，无需额外写大量CSS调整样式

核心实现代码示例 #

// 导入所需依赖
import { DataGrid } from '@mui/x-data-grid';
import Chip from '@mui/material/Chip';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';
import WarningIcon from '@mui/icons-material/Warning';

// 定义状态与样式的映射表，可根据自己的业务需求扩展
const statusStyleMap = {
  success: {
    label: '运行成功',
    icon: <CheckCircleIcon />,
    bgColor: '#e6f7ff',
    textColor: '#1890ff'
  },
  failed: {
    label: '运行失败',
    icon: <ErrorIcon />,
    bgColor: '#fff1f0',
    textColor: '#cf1322'
  },
  warning: {
    label: '运行警告',
    icon: <WarningIcon />,
    bgColor: '#fffbe6',
    textColor: '#faad14'
  }
}

// 列配置
const columns = [
  // 其他列配置省略
  {
    field: 'runStatus',
    headerName: '运行状态',
    width: 160,
    renderCell: (params) => {
      // 匹配当前值对应的样式配置
      const currConfig = statusStyleMap[params.value] || {};
      return (
        <Chip
          size="small"
          icon={currConfig.icon}
          label={currConfig.label || params.value}
          sx={{
            backgroundColor: currConfig.bgColor || '#f5f5f5',
            color: currConfig.textColor || '#333',
            fontWeight: 500,
            borderRadius: '999px', // 确保是椭圆形效果
            px: 1
          }}
        />
      )
    }
  }
]

如果不想使用Chip组件，你也可以自己写原生div实现，只需要给div设置对应的圆角、内边距、行高即可，渲染逻辑和上述逻辑完全一致。

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