如何修改React Victory组件Tooltip提示框的字体颜色

解决方案 #

VictoryTooltip的样式分为两个独立的配置项，你之前修改不生效是因为属性对应错了作用范围：

• flyoutStyle 仅作用于提示框的外层悬浮面板，你之前配置的fill是面板背景色，和文字样式无关
• 文字样式需要通过style属性配置，且因为Victory基于SVG实现，文字颜色用SVG标准的fill字段，而非普通CSS的color字段。

修改后的代码示例如下：

const { x, y } = tooltipProps;
const rotation = `rotate(0 ${x} ${y})`;
return (
  <g transform={rotation}>
    <VictoryTooltip
      {...tooltipProps}
      cornerRadius={5}
      pointerLength={4}
      flyoutHeight={30}
      flyoutStyle={{
        stroke: "none",
        fill: props.color,
      }}
      {/* 新增style配置修改文字颜色，示例为白色 */}
      style={{
        fill: "#ffffff"
      }}
      constrainToVisibleArea={true}
      renderInPortal={true} />
  </g>
);

如果tooltipProps本身包含style属性，只需要保证你自定义的style写在{...tooltipProps}之后，就可以覆盖原有配置不被抵消。

内容的提问来源于stack exchange，提问作者Wai Yan Hein