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

Question

The MUI examples only teach how to choose between a defined number of colors. I would like to be able to choose among all the possible colors.

Example: We have a cell value between 0 and 100. Each value could be converted to a color thanks to a given function. Then, the color is applied to the color.

How would you proceed please?

Answer 1

Solution from @jacob smith is working:

Use the renderCell to wrap your value with a div or similar and style that as you need, you should be able to use this in combination with cellClassName to get the div to fill the whole cell.

You would need something similar to the following in the column definition:

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>
      );
    }

Here is a codesandbox example