如何修改VictoryLegend数据字体大小？自定义legendLabel未生效

问题所在 #

1. labels属性传值方式错误：VictoryLegend的labels属性需要接收一个返回文本组件的函数，或者对应每个图例项的字符串数组。你直接传入<legendLabel/>这种已经实例化的组件，无法让组件接收每个图例的动态props（比如文本内容），因此自定义逻辑不会生效。
2. 组件定义顺序不对：你用const声明的legendLabel组件写在了VictoryLegend之后，由于const声明的变量没有变量提升，当React渲染VictoryLegend时，legendLabel还未被定义，自然无法识别。
3. props覆盖顺序错误：在自定义<text>组件中，你把{...props}放在了自定义fontSize等属性之后，这会导致VictoryLegend自带的默认props（比如默认字体大小）覆盖你设置的24，最终自定义字体大小不生效。

修复代码 #

// 先定义自定义标签组件，确保在VictoryLegend渲染前可用
const legendLabel = (props) => {
  return (
    <text
      {...props} // 先传入默认props，再用自定义属性覆盖默认值
      fontSize={24}
      textAnchor="middle"
      dominantBaseline="central"
    >
      {props.text}
    </text>
  );
};

const legendData = [
  {name: "Difficulty", symbol: {fill: "green", type: "square", size: 14}},
  {name: "Enjoyment", symbol: {fill: "blue", type: "square", size: 14}}
];

// 正确使用VictoryLegend，labels传入组件函数
<VictoryLegend
  x={100}
  y={10}
  title="Legend"
  centerTitle
  orientation='horizontal'
  gutter={20}
  style={{title: {fontSize: 30}}}
  data={legendData}
  labels={legendLabel} // 直接传递函数，而非实例化组件
/>

更简洁的替代方案 #

如果不需要完全自定义<text>组件，直接通过style.labels配置字体大小即可，无需写自定义组件：

<VictoryLegend
  x={100}
  y={10}
  title="Legend"
  centerTitle
  orientation='horizontal'
  gutter={20}
  style={{
    title: {fontSize: 30},
    labels: {
      fontSize: 24,
      textAnchor: "middle",
      dominantBaseline: "central"
    }
  }}
  data={legendData}
/>

内容的提问来源于stack exchange，提问作者Arjan van der Laan