React/TS内联style用三元运算符设颜色报类型错误如何解决

• 核心问题是内联样式的传参格式写错了。React的内联style属性要求传入「CSS属性名为键、样式值为值」的标准对象，你最初的写法style={{ payload[1] ? color : ${payload[1].color} }}根本没有指定CSS属性名color，TypeScript会把你写的三元表达式结果解析成对象的属性名，自然会识别出payload不是合法的CSS属性，抛出类型不匹配的错误。
• 你调整后的代码还存在三元逻辑写反的问题：style={{ color: payload[0] ? color : ${payload[0].color}}}这段逻辑，当payload[0]存在（真值）时你用了外部的color变量，当payload[0]不存在（假值）时反而去读取payload[0].color，不仅和你要的“取payload项自带颜色”的需求相反，还会触发空值读取的运行时报错。
• 另外你最初的代码里混用了payload[0]和payload[1]两个下标，判断条件用payload[1]，渲染内容又交叉取两个下标的属性，很容易出现undefined取值问题。

按照下面的规则调整即可：

1. 给style对象明确写对CSS属性名color，不要把样式值直接当成整个style对象传入
2. 修正三元判断逻辑：对应下标的payload项存在时，取它自带的color属性，不存在时返回提前设置好的兜底默认色
3. 统一payload的数组下标，判断、取样式、渲染内容都用同一个下标，避免交叉取值错误
4. 提前把当前要渲染的payload项存为变量，简化代码同时做好类型收窄，避免TS报可能为undefined的类型错误

修正后的完整代码参考：

import { TooltipProps } from 'recharts';

// 可根据你项目实际的value、name类型替换泛型参数
const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>) => {
  if (active && payload && payload.length) {
    // 要渲染第几个tooltip项就取下标几，这里以第一个项（下标0）为例，需要第二个就改成1
    const currentItem = payload[0];
    return (
      <div className="custom-tooltip">
        <ul
          className="recharts-tooltip-item-list"
          style={{ padding: '0px', margin: '0px', listStyle: 'none' }}
        >
          <li
            className="recharts-tooltip-item"
            // 逻辑：当前项存在则用自带颜色，否则用#333作为兜底色，可替换为你需要的默认色
            style={{ color: currentItem?.color ?? '#333' }}
          >
            {currentItem ? `${currentItem.dataKey} : ${currentItem.value}` : ""}
          </li>
        </ul>
      </div>
    );
  }
  return null;
};

这里用了可选链?.和空值合并运算符??简化判断，和修正后的三元逻辑等价，写法更简洁。

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