如何更改 react-popper-tooltip 的箭头颜色？答案

【问题标题】：How to change the arrow color of react-popper-tooltip?如何更改 react-popper-tooltip 的箭头颜色？
【发布时间】：2020-07-28 17:42:55
【问题描述】：

我正在使用 react-popper-tooltip ，我尝试自定义我自己的工具提示，问题是我找不到改变箭头颜色的方法。

在线演示：https://stackblitz.com/edit/react-qjma64

  <TooltipTrigger
      {...props}
      tooltip={({
        arrowRef,
        tooltipRef,
        getArrowProps,
        getTooltipProps,
        placement
      }) => (
        <div
          {...getTooltipProps({
            ref: tooltipRef,
            className: "tooltip-container"
          })}
        >
          <div
            {...getArrowProps({
              ref: arrowRef,
              className: "tooltip-arrow",
              "data-placement": placement
            })}
          />
          }{tooltip}
        </div>
      )}
    >

我想我应该在这里添加样式：

{...getArrowProps({
              ref: arrowRef,
              className: "tooltip-arrow",
              "data-placement": placement
            })}

但我不能将 ::after 与内联样式一起使用。谁能告诉我如何自定义工具提示？

【问题讨论】：

标签： reactjs

【解决方案1】：

您不必使用内联样式。您可以将覆盖添加到您的 CSS 文件中。将此添加到 style.css 以将箭头颜色更改为红色。

.tooltip-arrow[data-placement*='bottom']::after {
  border-color: transparent transparent red transparent !important;
}

【讨论】：