recharts PieChart 抑制饼图选择边框

Question

使用 recharts PieChart 实现，我想自定义选定饼图元素周围的边框。在教程中它是黑色的，带有圆角：

我尝试禁用它，即将自定义侦听器附加到单击事件 - 但边框仍然按原样显示，即使（我认为）我消耗了这些事件。

  data: 'productivity' | 'recreation' | 'tbd' | undefined;
};

export const ContentGraph = React.memo(({ data }: ContentGraphProps) => {
  const content = getContent();

  const consumeChartClick = function (nextState: CategoricalChartState, event: any) {
    console.log("Consuming pie chart click event: Click");
    return;
  }
  const consumeChartDown = function (nextState: CategoricalChartState, event: any) {
    console.log("Consuming pie chart click event: Down");
    return;
  }

  const consumeChartUp = function (nextState: CategoricalChartState, event: any) {
    console.log("Consuming pie chart click event: Up");
    return;
  }

  const consume = function(data: any, index: number, e: React.MouseEvent) {
    // do nothing
    // e.stopPropagation;
    console.log("Consuming pie click");
    return;
  }

  if (!data) return null;

  return (
    <>
      <ResponsiveContainer width="100%" height={140}>
        {/* investigate on github, generateCategoricalChart.tsx */}
        <PieChart onClick={consumeChartClick} onMouseDown={consumeChartDown} onMouseUp={consumeChartUp}>
          <Pie data={data} innerRadius={40} outerRadius={70} paddingAngle={1} dataKey="count" onclick={consume}>
            {data.map(({ curr }) => (
              <Cell key={curr} fill={content: content[curr].color} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
      <Legend>
        {data.map(({ curr }) => (
          <LegendRow key={curr}>
            <LegendTerm color={content[curr].color} />
            <LegendDescription>{content[curr].name}</LegendDescription>
          </LegendRow>
        ))}
      </Legend>
    </>
  );
});

据我了解，应该压制边界，但它仍然出现？输出显示在控制台中 - 但不需要的边框也显示在控制台中。

Answer 1

只需简单地添加outline: none到单元格中的样式即可。

<Cell style={{outline: 'none'}} key={curr} fill={content: content[curr].color} />