如何更改 React Victory Tooltip 的字体颜色答案

【问题标题】：How to change the font color of React Victory Tooltip如何更改 React Victory Tooltip 的字体颜色
【发布时间】：2021-12-27 13:14:33
【问题描述】：

我正在开发一个 React JS 项目。我的应用程序需要以图表格式显示一些数据。我为此使用React Victory。当用户将光标悬停在栏上时，我正在显示工具提示。我可以显示工具提示。但我无法更改工具提示的字体颜色。

这是我的工具提示代码。

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,
          }}
          constrainToVisibleArea={true}
          renderInPortal={true} />
      </g>
    );

我尝试将颜色道具设置为 flyoutStyle 道具对象。这是行不通的。我也尝试过使用样式道具。这是行不通的。它始终以默认黑色显示字体颜色。我该如何改变呢？

【问题讨论】：

标签： reactjs victory-charts

【解决方案1】：

在<VictoryBar> 处定义labels: {fill: "red"} 会改变工具提示的字体颜色。

参见下面的示例：

<VictoryBar
labelComponent={<VictoryTooltip/>}
data={[
  {x: 2, y: 5, label: "right-side-up"},
  {x: 4, y: -6, label: "upside-down"},
  {x: 6, y: 4, label: "tiny"},
  {x: 8, y: -5, label: "or a little \n BIGGER"},
  {x: 10, y: 7, label: "automatically"}
]}
style={{
  data: {fill: "tomato", width: 20},
  labels: {fill: "red"}
}}  />

【讨论】：

【解决方案2】：

您必须为此使用style 属性

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"
      }}
      style={{ fill: props.color }}
      constrainToVisibleArea={true}
      renderInPortal={true} />
  </g>
);

flyoutStyle 将样式应用于容器，style 应用于标签本身

【讨论】：

谢谢。现在可以了。