如何在角度中设置 ngx-bootstrap 组件的样式？

Question

我想更改导航链接样式

这是我在 my.component.scss 中的尝试

tabset {
    a {
        .nav-link {
            background: #FFFFFF;
            border: 1px solid #DDE6FB;
            border-radius: 4px;
            font-family: 'Open Sans', sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            text-align: center;
            color: #000000;

            &.active {
            }
        }
    }

}

但是没用...

my.component.html 中的模板

<tabset>
<tab>
    <ng-template tabHeading>
        Tab 3
        <span
              class="badge">12</span>
    </ng-template>

    tab content
</tab>
</tabset>

我该怎么做？

Answer 1

您需要使用 Angular 提供的名为

::ng-deep

的伪类来包装 CSS。这将关闭视图封装，并且您的样式将变得全局。但是，这将更改使用该 ngx-tabset 组件的所有组件实例的样式，因此您需要使用

:host

伪类选择器。

你的代码应该看起来像这样：

[您的组件].component.scss 文件：

:host {
  ::ng-deep {
    tabset {
      a {
        .nav-link {
          background: #ffffff;
          border: 1px solid #dde6fb;
          border-radius: 4px;
          font-family: 'Open Sans', sans-serif;
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          text-align: center;
          color: #000000;

          &.active {
          }
        }
      }
    }
  }
}

和你的html：

<tabset>
<tab>
    <ng-template tabHeading>
        Tab 3
        <span
              class="badge">12</span>
    </ng-template>

    tab content
</tab>
</tabset>

您可以阅读更多相关内容：https://angular.io/guide/component-styles

Answer 2

:host { enter your styles here  }

请按照 Angular 文档中的以下说明进行操作 https://angular.io/api/core/ViewEncapsulation#ShadowDom

Answer 3

如果无法直接使用 CSS 自定义样式，有两种方法可以向 ngx-bootstrap 组件（特别是 Tab 组件）添加自定义样式：

1. 如果我们在组件文件中使用

   encapsulation: ViewEncapsulation.None

   ，那么在组件CSS中使用

   .nav-link.disabled, .nav-link:disabled { color: white; } or .nav-link {background-color: green}

   之类的样式更改将会起作用，但是将ViewEncapsulaion设置为None意味着将该组件的样式设为全局，这可能会影响其他组件的样式.

2. 如果我们在选项卡集中使用选项卡的customClass属性（如

   <tab customClass="custom-tab-style">

   ），然后使用根文件夹（.src）中的styles.scss全局样式文件（如

   .custom-tab-style{ .nav-link.disabled, .nav-link:disabled{ color: white; } }

   ）将可以正常工作，而无需将ViewEncapsulation设置为None只要类名唯一，也不会影响任何其他组件样式。