我需要你关于Mui/X-Data-Grid的帮助。我正在尝试根据文本值渲染Mui/X-Data-Grid中包含文本/图标的单元格，但无法这样做。以下是CodeSandBox链接：CodeSandBox链接

我想要和这个类似的东西。

顺晟科技：

MUI column data grid example : 

{
              field: "",
              width:150,
              renderCell: (cellValues) => {
                return (
                  <>
                    <IconButton
                      color="secondary"
                      aria-label="add an alarm"
                      onClick={(event) =>
                        this.handleModalDelete(event, cellValues)
                      }
                    >
                      <DeleteIcon style={{ color: blue[500] }} />
                    </IconButton>
                  </>
                );
              },
            }

您可以在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)} />;
    }
  }
];

现场演示