CSS不适用于“自定义工具提示”的箭头

Question

我正在使用ReactTooltip

组件

<ReactTooltip className={styles.customTheme} id={id} place={placement} effect="solid"> 
    {children}
</ReactTooltip>

SCSS

.customTheme {
  color: #ff6e00 !important;
  background-color: orange !important;

  &.place-top {
    &::after {
      border-top: 6px solid orange !important;
    }
  }
}

结果

问题

箭头颜色未按预期更改。

Answer 1

您还可以在html标签中使用“ title”，例如 名称：“ <input type="text" title="enter name" />

Answer 2

你很接近。您的 SCSS 只需要 ::before 伪选择器。

.customTheme {
  background-color: #ff6e00 !important;
  border: 1px solid;
  &.place-top {
    &::before, &::after {
      border-top: 8px solid #ff6e00!important;
    }
  }

请注意，您应该只能在组件上使用 backgroundColor 和/或 arrowColor 道具，但它们不起作用：https://github.com/wwayne/react-tooltip/issues/594