使用带有文本/图标的彩色椭圆渲染 DataGrid 单元格答案

【问题标题】：Render a DataGrid cell with a colored oval with text/icon in it使用带有文本/图标的彩色椭圆渲染 DataGrid 单元格
【发布时间】：2021-09-23 00:12:40
【问题描述】：

我需要你关于 mui/x-data-grid 的帮助。我正在尝试根据文本值在 mui/x-data-grid 中呈现带有文本/图标的单元格，但无法这样做。以下是codeandbox链接： codesandbox link

我想要类似于this 的东西。

【问题讨论】：

标签： html reactjs material-ui

【解决方案1】：

您可以在 MUI 中使用 Chip 组件而不是推出自己的组件，使其看起来像屏幕截图中一样，将其 variant 设置为 outlined。下面是一个例子：

function getChipProps(params: GridRenderCellParams): ChipProps {
  if (params.value === "RED") {
    return {
      icon: <WarningIcon style={{ fill: red[500] }} />,
      label: params.value,
      style: {
        borderColor: red[500]
      }
    };
  } else {
    return {
      icon: <CheckCircleIcon style={{ fill: blue[500] }} />,
      label: params.value,
      style: {
        borderColor: blue[500]
      }
    };
  }
}


const columns: GridColDef[] = [
  {...},
  {
    field: "status",
    headerName: "Status",
    renderCell: (params) => {
      return <Chip variant="outlined" {...getChipProps(params)} />;
    }
  }
];

现场演示

【讨论】：

非常感谢您的回复。您的解决方案正是我所需要的。你让我今天一整天都感觉很好。再次感谢。