覆盖悬停颜色上的 mdboostrap 下拉项答案

【问题标题】：Overwrite mdboostrap dropdown items on hover colors覆盖悬停颜色上的 mdboostrap 下拉项
【发布时间】：2019-07-23 18:43:32
【问题描述】：

我有一个使用 SCSS 设置样式的 Angular MDBoostrap 导航栏。当我添加一个下拉选项卡时，我注意到字体颜色和背景颜色都变为白色“悬停”，如this。

<!-- Links -->
<ul class="navbar-nav mr-auto custom-nav">
  <li class="nav-item">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['about']">About<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item page-scroll">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['contact']">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['support']">Support</a>
  </li>
  <li class="nav-item dropdown btn-group" dropdown>
    <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect >Products </a>
    <div class="dropdown-menu dropdown-primary dropdown-menu-xl-right" role="menu">
      <a class="dropdown-item" [routerLink]="['products']">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
 </ul>
<!-- Links -->

我尝试创建自定义 scss 样式来覆盖引导样式：

.custom-nav{
  color: #ffffff;
  font-size: larger;
  font-family: Impact;

  a {
    color: white;
    font-family: Calibri;
    font-size: 17px;
  }

  li {
    margin-left: 20px;
  }

}

.dropdown-item:hover{
  color: black;
}

我也尝试了here 建议的所有方法。有谁知道在哪里或如何找到这种引导样式，因为我无法检查“悬停”效果来找到它的来源。

【问题讨论】：

你试过color: black !important;悬停吗？
是的，不幸的是，这也不起作用
向我们展示您在 node_modules/ng-uikit-pro-standard/assets/scss/_custom-skin.scss 中找到的 _custom-skin.scss
@JakeFromSF 我没有任何自定义皮肤..

标签： html angular sass mdbootstrap

【解决方案1】：

要在悬停颜色上覆盖引导导航下拉项，只需将“skin-accent”更改为您喜欢的颜色即可。

参考这里以获得创建自定义皮肤的帮助：mdbootstrap.com

【讨论】：