为 Angular-5 中的库组件覆盖 css class 属性

Question

我的代码中有一个来自第三方库的 angular-5 下拉组件，该组件有自己的 CSS，由于其默认行为，我无法更改其 CSS（这里我试图减小下拉菜单的宽度），我尝试使用另一个 css class 和内联样式，但它不会改变宽度。

HTML 代码，我控制了我的代码：（第 3 方下拉组件）

    <test-dropdown id="dropdown" label="Options Array"
              [selectedOption]="dropdownOptions[0]">
           <test-option *ngFor="let option of dropdownOptions"
              [option]="option" [disabled]="option.disabled">{{option.label}}  
           </test-option>
    </test-dropdown>

上面的下拉组件，运行浏览器中的应用程序看起来像，

    <test-dropdown _ngcontent-c4="" id="dropdown" label="default" ng-reflect-label="default">
  <div class="test-dropdown" ng-reflect-ng-class="[object Object]">
    <label>DropDown</label>
    <div>
      <button class="select">Select...</button>
      <div class="dropdown">
        <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
  }-->
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option One
          </button>
        </test-option>
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option Two
          </button>
        </test-option>
        <!--bindings={}-->
      </div>
    </div>
  </div>
</test-dropdown>

简而言之，我想在 classes 上应用 css 样式，test-dropdown->button.select 和 test-dropdown->div.dropdown

Answer 1

默认表单值很可能取自您网站的 CSS，不太可能取自第 3 方库的样式。

您可以显示该网站和您的 CSS class 代码吗？在 Chrome 的开发者模式下跟踪问题并查看它从哪里获取样式会更容易。

Answer 2

这道题依赖于CSS specificity：CSS规则有顺序，如果你想应用你的风格，那么你应该使用正确的 CSS 规则。

您还必须将其与 Angular's view encapsulation 结合使用，以确保确实应用了您的样式。

为此，有几个解决方案：

在组件的 CSS 文件
在浏览器中检查您的组件，并使用选择器将其定位到您的全局 CSS 文件
使用 ngStyle 指令，或仅用于一个属性、[style.property]="'value'"

编辑

在您的情况下，您应该将样式添加到全局 CSS 文件 style.css（或它具有的任何扩展名）。您的选择器将是：

test-dropdown#dropdown div.test-dropdown div button.select {}

Answer 3

我使用了 ::ng-deep pseudo-class selector，为 angular 视图封装参考了此文档 https://blog.angular-university.io/angular-host-context。

下面的代码片段可以让我使用 ng-deep 覆盖 css 属性。例如，在我的例子中，<test-dropdown> 是一个 angular 组件，它采用默认的 css class .dropdown，现在我想修改 min-width 属性所以我使用 ng-deep pseudo-class 选择器做到了，其他 angular 组件也一样。

test-dropdown::ng-deep .dropdown {
  min-width: 20%;
}

test-button::ng-deep .test-button {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  text-align: center;
  cursor: pointer;
  min-width: 20%;
}

test-date-picker::ng-deep .date {
  min-width: 100%;
  line-height: 1.42857143;
}

test-date-picker::ng-deep .date-picker {
  min-width: 100%;
  line-height: 1.42857143;
}

为 Angular-5 中的库组件覆盖 css class 属性

Overwrite css class property for library component in Angular-5

css

angular-ui-bootstrap

bootstrap-4

angular

angular5

编辑