Recharts PieChart如何取消选中扇区的默认黑色圆角边框？

你的问题核心在于：Recharts的Pie组件会自动维护active状态，当鼠标点击/交互时，会设置activeIndex并渲染默认的高亮边框，单纯消费事件回调不会阻止组件内部的状态更新和样式渲染。下面是两种直接有效的解决方案：

方案1：完全取消选中边框 #

直接通过属性控制，让组件没有激活状态的渲染：

方法A：强制设置activeIndex为-1 #

给Pie组件添加activeIndex={-1}，这样不会有任何扇形处于激活状态，自然不会显示高亮边框：

<Pie 
  data={data} 
  innerRadius={40} 
  outerRadius={70} 
  paddingAngle={1} 
  dataKey="count" 
  onClick={consume} // 注意用驼峰式的onClick，不是小写onclick
  activeIndex={-1} // 关键属性
>
  {data.map(({ curr }) => (
    <Cell key={curr} fill={content[curr].color} />
  ))}
</Pie>

方法B：自定义无高亮的激活形状 #

创建一个和普通扇形完全一致的激活形状，覆盖默认的高亮样式：

// 自定义无高亮的形状组件
const NoHighlightShape = (props: any) => {
  return <PieArc {...props} stroke="none" />;
};

// 在Pie组件中使用
<Pie 
  data={data} 
  innerRadius={40} 
  outerRadius={70} 
  paddingAngle={1} 
  dataKey="count" 
  onClick={consume}
  activeShape={<NoHighlightShape />} // 关键属性
>
  {data.map(({ curr }) => (
    <Cell key={curr} fill={content[curr].color} />
  ))}
</Pie>

方案2：自定义选中边框样式 #

如果需要保留选中反馈但修改样式，可以自定义activeShape调整边框的颜色、宽度、圆角等：

const CustomActiveShape = (props: any) => {
  return (
    <PieArc
      {...props}
      stroke="#66ccff" // 自定义边框颜色
      strokeWidth={1} // 自定义边框宽度
      rx={0} // 取消圆角（默认是带圆角的）
    />
  );
};

// 在Pie组件中使用
<Pie 
  data={data} 
  innerRadius={40} 
  outerRadius={70} 
  paddingAngle={1} 
  dataKey="count" 
  onClick={consume}
  activeShape={<CustomActiveShape />}
>
  {data.map(({ curr }) => (
    <Cell key={curr} fill={content[curr].color} />
  ))}
</Pie>

补充：你代码里的小问题 #

你写的Pie组件事件是小写的onclick，Recharts组件的事件属性是驼峰式的onClick，这也是之前事件回调可能没完全生效的原因之一，记得修正。

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