React中如何将十进制RGB颜色值转换为背景色

你的问题出在格式不匹配：API返回的是打包后的十进制RGB整数（比如16776960），但CSS的rgb()函数需要红、绿、蓝三个0-255的独立数值，直接把十进制数代入rgb()会导致格式错误，所以背景色不生效。

解决步骤 #

1. 编写十进制转RGB三分量的函数
   通过位运算从十进制数中提取红、绿、蓝三个通道的数值：

const decimalToRgb = (decimal) => {
  const r = (decimal >> 16) & 0xFF; // 提取红色分量
  const g = (decimal >> 8) & 0xFF;  // 提取绿色分量
  const b = decimal & 0xFF;         // 提取蓝色分量
  return `${r}, ${g}, ${b}`;
};

2. 在组件中使用转换后的数值
   修改代码，用转换函数处理row.rgbColor后再传入rgb()：

<TableCell>
  <Box style={{ background: `rgb(${decimalToRgb(row.rgbColor)})` }}>
    {row.rgbColor}
  </Box>
</TableCell>

可选方案：转成十六进制格式 #

如果你更习惯用十六进制颜色值，也可以直接把十进制转成十六进制字符串：

const decimalToHex = (decimal) => {
  // 转成十六进制并补全6位，转大写（可选）
  return `#${decimal.toString(16).padStart(6, '0').toUpperCase()}`;
};

然后修改样式部分：

<Box style={{ background: decimalToHex(row.rgbColor) }}>

比如十进制16776960会转成#FFFF00，和你给出的网页安全色值一致。

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