React+TS中如何使用yarn安装的randomColor包为表格不同列分配颜色

前置依赖准备 #

如果你已经通过yarn安装了randomcolor，还需要补充安装TS类型包避免类型报错：

yarn add @types/randomcolor -D

核心实现思路 #

不要在表格渲染阶段实时生成随机色，否则组件重渲染时列颜色会反复跳动。正确的做法是在列配置初始化阶段，绑定每列的唯一标识作为随机种子生成颜色，同时缓存生成结果，保证同一列的颜色全局唯一且固定。

完整可运行示例 #

import { useMemo } from 'react';
import randomColor from 'randomcolor';

// 定义表格列类型
type ColumnConfig = {
  key: string;
  title: string;
  dataIndex: string;
  columnBg: string;
  columnTextColor: string;
};

// 原始列配置（不需要带颜色参数）
const baseColumns = [
  { key: 'id', title: '用户ID', dataIndex: 'id' },
  { key: 'username', title: '用户名', dataIndex: 'username' },
  { key: 'registerTime', title: '注册时间', dataIndex: 'registerTime' },
  { key: 'lastLogin', title: '最近登录', dataIndex: 'lastLogin' },
];

// 模拟表格数据
const mockTableData = [
  { id: 1001, username: '张三', registerTime: '2023-01-12', lastLogin: '2024-05-20' },
  { id: 1002, username: '李四', registerTime: '2023-04-02', lastLogin: '2024-05-22' },
];

export default function ColoredTable() {
  // 缓存带颜色的列配置，仅在组件初始化时生成一次
  const columns = useMemo<ColumnConfig[]>(() => {
    return baseColumns.map(col => {
      // 生成浅色系背景，适合表格表头场景
      const bg = randomColor({
        luminosity: 'light',
        seed: col.key, // 核心：用列key作为随机种子，同列永远生成相同颜色
        // 如需固定色系，可传入hue参数，比如hue: 'blue' 就会生成不同深浅的蓝色
      });
      // 生成对应深色文字，保证对比度足够
      const textColor = randomColor({
        luminosity: 'dark',
        seed: `${col.key}-text`,
      });
      return {
        ...col,
        columnBg: bg,
        columnTextColor: textColor,
      };
    });
  }, []);

  return (
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
      <thead>
        <tr>
          {columns.map(col => (
            <th
              key={col.key}
              style={{
                padding: '12px 8px',
                border: '1px solid #e5e7eb',
                backgroundColor: col.columnBg,
                color: col.columnTextColor,
              }}
            >
              {col.title}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {mockTableData.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {columns.map(col => (
              <td
                key={col.key}
                style={{
                  padding: '10px 8px',
                  border: '1px solid #e5e7eb',
                  // 如果需要单元格也带同列浅底色，放开下面注释即可
                  // backgroundColor: col.columnBg,
                  // opacity: 0.7,
                }}
              >
                {row[col.dataIndex as keyof typeof row]}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

常见踩坑说明 #

• 必须传seed参数绑定列唯一标识，否则每次调用randomColor都会生成全新的随机色，导致颜色不固定
• 不要在组件return的JSX渲染逻辑里直接调用randomColor，否则组件每次state更新触发重渲染，列颜色都会重新生成
• 生成表头背景色时建议固定luminosity: 'light'，避免生成过深的背景色导致文字识别困难，如果需要自定义配色风格，可以调整hue、luminosity参数适配项目设计规范

内容的提问来源于stack exchange，提问作者Jennifer De Goede