覆盖angular2中子div的CSS属性

Question

目前我在我网站的 GUI 中使用 ng2-bootstrap 的 progressbar。我用于此步骤的 HTML 非常简单：

  <div class="col-lg-8 col-md-4">
    <progressbar  max="100" class="progress-striped" [value]="progress">{{progress}}%</progressbar>
  </div>

这会呈现为以下 HTML：

<div class="col-lg-8 col-md-4">
    <progressbar class="progress-striped" max="100">
        <div progress="" max="100" class="progress" style="height: 30px;">
            <bar>
                <div aria-valuemin="0" class="progress-bar" role="progressbar" style="min-width: 0px; width: 0%;" ng-reflect-initial-classes="progress-bar" aria-valuenow="0" aria-valuetext="0%">
                    0%
                </div>
            </bar>


        </div>
    </progressbar>
</div>

我删除了一些角度指令以提高可读性

进度条的高度设置在css类进度中的第二个div中，我无法访问，因为它是在提供的组件源代码中设置的。如果我想更改字体大小，最里面的div 也是我需要访问的。

我试图覆盖父级中的样式来设置高度，但进度类更具体，因此我无法覆盖它。

我发现了一个使用ElementRef 和Renderer 的不太漂亮的解决方案，但是如果有多个progressbars（ATM 我正在​​尝试访问第二个进度条），这会非常糟糕并且会变得混乱：

  ngAfterViewInit() {
    this.renderer.setElementStyle(this.el.nativeElement.querySelector('progressbar').querySelector('div'), 'height', '30px');
    this.renderer.setElementStyle(this.el.nativeElement.querySelector('progressbar').querySelector('div').querySelector('bar').querySelector('div'), 'font-size', '15px');
  }

有没有更好的方法来解决这个问题？作为最后的手段，我可​​以尝试调整组件的源代码以访问这两个值，但实际上我想避免这种情况。

Answer 1

您提到特异性是问题所在。如果是这种情况，使用!important 是一种解决方案。任何标有!important 的东西都将获得最高特异性，并且不能被任何其他非！重要的 CSS 规则或内联样式覆盖。 当放入您的 global.css 文件时，这应该适用于所有进度条。 由于视图封装，它可能无法在您的 component.css 中工作。

progressbar > div[progress] {
  height: 30px !important;
}

progressbar > div[progress] > bar > .progress-bar {
  font-size: 15px !important;
}