首页 > 解决方案 > CSS 不适用于自定义工具提示的箭头

问题描述

我正在使用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;
    }
  }
}

结果

问题

箭头颜色未按预期更改。

标签： javascriptcssreactjssasstooltip

解决方案

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

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

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

推荐阅读