如何为MUI X Data Grid单元格设置全范围自定义颜色？

1. 编写颜色映射函数 #

针对0-100的数值，你可以通过计算颜色分量的渐变逻辑生成对应颜色。比如实现从低数值（0）的红色过渡到高数值（100）的绿色：

const getCellColor = (value) => {
  // 确保值被限制在0-100范围内
  const clampedValue = Math.max(0, Math.min(100, value));
  // 红色分量：0时为255，100时降至0
  const red = 255 - Math.round((clampedValue / 100) * 255);
  // 绿色分量：0时为0，100时升至255
  const green = Math.round((clampedValue / 100) * 255);
  // 蓝色分量固定为0，可根据需求调整
  const blue = 0;
  return `rgb(${red}, ${green}, ${blue})`;
};

如果偏好使用MUI主题色体系，也可以结合theme.palette和lighten/darken这类颜色工具，但直接计算RGB分量的方式更直观可控。

2. 在表格单元格中应用颜色 #

在MUI的TableCell组件中，通过sx属性动态绑定背景色（或文字颜色）：

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';

// 示例数据
const rows = [
  { id: 1, score: 25 },
  { id: 2, score: 70 },
  { id: 3, score: 95 },
];

export default function GradientColorTable() {
  return (
    <Table>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.id}</TableCell>
            <TableCell
              sx={{
                backgroundColor: getCellColor(row.score),
                color: '#fff', // 文字色适配背景提升可读性
                fontWeight: 'bold',
              }}
            >
              {row.score}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

3. 进阶优化（可选） #

• 若需要更平滑的色彩过渡，可改用HSL颜色模式调整色相值：

const getCellColor = (value) => {
  const clampedValue = Math.max(0, Math.min(100, value));
  // 色相从0（红色）过渡到120（绿色）
  const hue = (clampedValue / 100) * 120;
  return `hsl(${hue}, 100%, 50%)`;
};

• 可将颜色映射函数封装为自定义Hook，方便在多个组件中复用。

内容的提问来源于stack exchange，提问作者TheKalashnikov