fluent-ui - fluent-ui中TooltipHost的背景颜色

Question

在 fluent-ui 中使用 TooltipHost 时，我可以将背景颜色应用于工具提示吗？我试过了

const ttStyles: Partial<ITooltipHostStyles> = { 
    root: { display: 'inline-block', background:'yellow'} 
};

但它没有改变颜色。

谢谢

Answer 1

TooltipHost 只是一个元素的包装器，它应该显示一个 Tooltip，而不是 Tooltip 本身。因此，您需要在 Tooltip 上设置一些样式。但是由于 Tooltip 是由 Callout 组件组成的，因此您需要在底层 Callout 组件上设置相应的样式。也许我错过了一些更简单的东西，但这是我需要做的以更改工具提示的背景颜色：

<TooltipHost
  content="Tooltip Content"
  tooltipProps={{
    calloutProps: {
      styles: {
        beak: { background: 'yellow' },
        beakCurtain: { background: 'yellow' },
        calloutMain: { background: 'yellow' },
      },
    },
  }}
>
  <Icon iconName="Info" />
</TooltipHost>

在这种情况下，“喙”是指向图标的小三角形。“beakCurtain”是可见标注的整体背景。"calloutMain" 然后是工具提示中文本背后的背景。