【问题标题】：CSS is not applied to Custom Tooltips's arrowCSS 不适用于自定义工具提示的箭头
【发布时间】：2019-08-10 18:51:27
【问题描述】：

组件

<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;
    }
  }
}

结果

问题

箭头颜色未按预期更改。

【问题讨论】：

你能提供工作网页的链接吗？
place-top 听起来不对，有 place-bottom 吗？
@AndyHoffman 请在这里找到一个工作示例stackblitz.com/edit/react-wcn9s6
@JoshPittman 是的，我们确实有place-bottom，但我必须使用place-top
示例不起作用，什么都不是橙色，没有处理scss。

标签： javascript css reactjs sass tooltip

【解决方案1】：

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

【讨论】：

这是一个不同问题的解决方案。

【解决方案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

【讨论】：