reactstrap 工具提示自定义 CSS 不起作用

Question

任何有reactstrap包经验的人都知道如何更改箭头的颜色和出现的工具提示的不透明度？我尝试了几种解决方案，但找不到答案。 我的代码如下所示：

<Tooltip
          autohide={false}
          className={styles.tooltip}
          innerClassName={styles.TextWithTooltip_tooltip}
          arrowClassName={styles.arrow}
          trigger="click hover focus"
          id={id}
          role="tooltip"
          placement="bottom"
          target={tooltipRef.current}
          toggle={toggle}
          isOpen={tooltipOpen}
        >
          {tooltipContent}
        </Tooltip>

我尝试过：

.TextWithTooltip {
  &_tooltip {
    border-radius: 10px !important;
    opacity: 0.5 !important;
    text-align: left !important;
    max-width: 580px !important;
    background-color: $white !important;
    color: $blue !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.56;
    padding: 18px 20px !important;
    box-shadow: 0 0 9px 4px rgba(214, 214, 214, 0.5);
    @media (max-width: $mobile-max-width) {
      max-width: 300px !important;
    }
  }

  &_icon {
    padding: 5px;
  }

  &_label {
    font-size: 18px;
    color: $blue;
    font-weight: 700;
    margin-bottom: 10px;
    @media (max-width: $mobile-max-width) {
      font-size: 17px;
      max-width: 100%;
    }
  }
}

.tooltip-inner {
  opacity: 1 !important;
}

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: aqua !important; // default is #000;
}

但没有任何作用。 如果有人知道这个问题的解决方案，我们将不胜感激。

Answer 1

这可以通过 CSS 来完成。如果您不想全局更改所有工具提示，请使用 CSS 选择器。

编辑 1：您需要使用

border-bottom-color

作为指向上方的箭头。查看此文档：https://css-tricks.com/snippets/css/css-triangle/

编辑 1：您在 SCSS 中使用

.tooltip.inner

，它需要是

.tooltip-inner

编辑 2：您必须使用

!important

来覆盖 most Bootstrap 规则。

---

箭头（工具提示位于底部）

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: aqua !important; // default is #000;
}

结果

---

工具提示不透明度

.tooltip-inner {
    opacity: .8 !important; // default is 1
}

结果

Answer 2

检查 Element body 部分，也许你的工具提示出现在你的 scss 部分之外。