渲染一个带有彩色椭圆且其中包含文本/图标的 DataGrid 单元格

Question

我需要您有关 mui/x-data-grid 的帮助。我试图根据文本值在 mui/x-data-grid 中渲染一个带有文本/图标的单元格，但无法这样做。以下是codesandbox链接： codesandbox链接

我想要类似的东西。

Answer 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)} />;
    }
  }
];

现场演示