MUI数据网格布尔细胞类型条件格式

Question

有一种有条件格式化具有“布尔”类型的MUI DataGrid单元格的方法。

在这里，带有布尔类型的复选框的文档中的沙盒：

https：//codesandbox.io/s/1ckfjp？file =/demo.tsx：1771-1855

const columns: GridColumns = [
    ...
    {
      field: 'isPaid',
      headerName: 'Is paid?',
      type: 'boolean',
      width: 140,
      editable: true,
    },
    ...

使用CellRender（在Cols定义中（

Https：//mui.com/x/reaect-data-grid/column-definition/#rendering-cells

））呈现我自己的绿色或红色图标的唯一途径，具体取决于价值是正确还是错误的？还是有更好的方法？

到目前为止，这似乎是最简单的方法：

Answer 1

const columns: GridColumns = [
    ...
    {
      field: 'isPaid',
      headerName: 'Is paid?',
      type: 'boolean',
      width: 140,
      editable: true,
      renderCell: (params) => {
        return params.value ? (
          <CheckIcon
            style={{
              color: theme.palette.success.light,
            }}
          />
        ) : (
          <CloseIcon
            style={{
              color: grey[500],
            }}
          />
        );
      },
    },
    ...

使用MUI版本“@mui/x-data-grid-pro”：“^6.2.0”您可以使用以下示例覆盖默认的CSS颜色：

Answer 2

 <Box
  sx={{
    '.MuiDataGrid-root .MuiDataGrid-booleanCell[data-value="true"]': {
      color: theme.palette.success.main
    },
    '.MuiDataGrid-root .MuiDataGrid-booleanCell[data-value="false"]': {
      color: theme.palette.error.main
    }
  }}
>
    //Your table...
    <DataGrid rows.. columns../>
</Box>