React+TS中为Recharts自定义Tooltip的p标签应用fill对应内联颜色

直接对payload数组做遍历渲染，给每个<p>标签绑定内联样式，将文字颜色设置为对应项的fill属性值即可，同时替换原来硬编码固定5个p标签的写法，适配任意数量的tooltip项。

修改后完整代码 #

import { TooltipProps, ValueType, NameType } from 'recharts';

// 扩展payload项类型，补充Recharts默认类型未声明的fill属性
type TooltipPayloadEntry = {
  dataKey: string;
  value: string | number;
  fill: string;
  [key: string]: any;
};

const CustomTooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>) => {
  if (active && payload?.length) {
    return (
      <div className="custom-tooltip" style={{ background: '#fff', padding: '8px 12px', border: '1px solid #eee', borderRadius: '4px' }}>
        {/* 如需显示分类label可以放开下面这行 */}
        {/* <p style={{ fontWeight: 500, margin: '0 0 6px' }}>{label}</p> */}
        {payload.map((entry, idx) => {
          const item = entry as TooltipPayloadEntry;
          return (
            <p 
              key={`tooltip-row-${idx}`}
              // 直接用当前项的fill值设置文字颜色
              style={{ color: item.fill, margin: '3px 0', fontSize: '14px' }}
            >
              {`${item.dataKey} : ${item.value}`}
            </p>
          );
        })}
      </div>
    );
  }
  return null;
};

关键点说明 #

• 替换了原代码硬编码payload[0]到payload[4]的写法，用map遍历自动适配任意数量的系列项，后续图表新增/删除系列不需要修改Tooltip逻辑
• 扩展TS类型解决默认类型定义中缺失fill属性的TS报错问题，符合TypeScript开发规范
• 内联样式直接绑定item.fill作为color值，完全匹配每个系列对应的图表颜色
• 代码里给p标签加了基础边距、给外层容器加了基础浮层样式，可根据自己的UI需求自行调整

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