覆蓋angular2中子div的CSS屬性

當前我在我的網站的GUI中使用progressbar的ng2-bootstrap。我用這一步的HTML很簡單：覆蓋angular2中子div的CSS屬性

<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-class進度中的第二個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'); 
    }

有沒有更好的方法來解決這個問題？作爲最後的手段，我可以嘗試調整組件的源代碼來訪問這兩個值，但實際上我想避免這種情況。

來源

2016-11-11 Akkusativobjekt

你提到了特異性問題。如果是這種情況，則使用!important是一種解決方案。任何標有!important的東西都將獲得最高特異性，並且不能被任何其他非重要的CSS規則或內聯樣式覆蓋。當你放入你的global.css文件時，這應該適用於所有進度條。由於視圖封裝，它可能不適用於component.css之內。

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

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

來源

2016-11-11 12:03:08 j2L4e

它的工作原理，很好！如果我沒有記錯，我嘗試了這個解決方案，但是我把css代碼放在了components.css文件中。現在我查找了主題視圖封裝，並將ViewEncapsulation設置爲None，它也與component.css文件一起使用 – Akkusativobjekt

覆蓋angular2中子div的CSS屬性

回答

相關問題