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

Question

我正在使用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 与内联样式一起使用。谁能告诉我如何自定义工具提示？

Answer 1

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

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