Переопределить CSS-свойство дочернего элемента div в angular2

Question

В настоящее время я использую индикатор выполнения ng2-bootstrap в графическом интерфейсе моего сайта. 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>

Я удалил некоторые угловые директивы, чтобы улучшить читаемость

Высота индикатора выполнения задается во втором div в прогрессе css-класса, к которому я не могу получить доступ, потому что он установлен в предоставленном исходном коде компонента. Также самый внутренний div это тот, который мне нужен для доступа, если я хочу изменить размер шрифта.

Я пытался переопределить стиль в родительском элементе, чтобы установить высоту, но класс прогресса более специфичен, и поэтому я не смог его переопределить.

Я нашел не очень красивое решение, которое использует ElementRef а также Renderer, но это очень плохо масштабируется и будет грязно, если есть несколько progressbars(Я пытаюсь получить доступ ко второму индикатору выполнения):

  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;
}