如何使用一系列颜色为 MUI 数据网格的单元格着色？

Question

MUI 示例只教如何在定义的数字 colors 之间进行选择。我希望能够在所有可能的 colors 中进行选择。

示例：我们有一个介于 0 和 100 之间的单元格值。由于给定的 function，每个值都可以转换为一种颜色。然后，将颜色应用于颜色。

请问您将如何进行？

Answer 1

来自@jacob smith 的解决方案正在运行：

使用 renderCell 将您的值包装为 div 或类似样式，并根据需要设置样式，您应该能够将其与 cellClassName 结合使用以使 div 填充整个单元格。

您需要在列定义中使用类似于以下内容的内容：

cellClassName: (params: GridCellParams<number>) => {
      return "super-app";
    },
    renderCell: (params: GridRenderCellParams) => {
      const color = getColor(params.value);

      return (
        <Box
          sx={{
            backgroundColor: color,
            width: "100%",
            height: "100%"
          }}
        >
          {params.value}
        </Box>
      );
    }

这是一个codesandbox示例