reactstrap工具提示自定义css不起作用 结果结果

问题描述

任何有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,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;
}

但没有任何效果。 如果有人知道解决方案，将不胜感激。

解决方法

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

编辑1：您需要使用border-bottom-color来指向向上的箭头。签出此文档：https://css-tricks.com/snippets/css/css-triangle/

编辑1：您在SCSS中使用的是.tooltip.inner，{>

编辑2：您必须使用.tooltip-inner覆盖大多数引导程序规则。

---

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

!important

结果

---

工具提示不透明度

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

结果