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

Question

我正在使用ReactTooltip

例子

成分

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

社会保障局

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

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

结果

问题

箭头颜色未按预期更改。

Answer 1

您还可以在 html 标签中使用“title”，如 Name:" <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