在使用Angular構(gòu)建前端應(yīng)用程序時(shí)，設(shè)置HTML的樣式變得至關(guān)重要。如果您的應(yīng)用程序使用Bootstrap或其他樣式框架，那么這些樣式表將越來越多，很容易出現(xiàn)問題。

解決這個(gè)問題的最好方法是使用Angular的優(yōu)先級系統(tǒng)管理樣式。

.hello {
color: blue !important;
}

在實(shí)現(xiàn)這個(gè)想法之前，需要了解Angular的樣式優(yōu)先主題，也就是指令以及元素的優(yōu)先級。

Angular組件使用ViewEncapsulation模式。每個(gè)組件都有一個(gè)單獨(dú)的封裝視圖，不同于其他組件的視圖。

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})

封裝視圖包括三個(gè)設(shè)置：None, ShadowDom和Emulated（默認(rèn)）。

優(yōu)先級是對ViewEncapsulation和CSS規(guī)則進(jìn)行處理的結(jié)果。

當(dāng)使用None時(shí)，樣式表將在全局范圍內(nèi)應(yīng)用。使用ShadowDom，每個(gè)組件將具有一個(gè)獨(dú)立的DOM，當(dāng)使用Emulated時(shí)，它將使用隨機(jī)生成的屬性添加樣式類，以確保僅應(yīng)用發(fā)出的樣式，防止樣式泄漏。

.my-class {
color: red;
}

如果樣式被串聯(lián)，則按順序應(yīng)用。

在下面的示例中，my-class將優(yōu)先級更高：

<div class="my-class hello">Hello World!</div>

無論如何，Angular在選擇單個(gè)樣式表，元素和指令的樣式時(shí)具有更高的優(yōu)先級，因此優(yōu)先級設(shè)置是不可避免的。

為了避免沖突，請始終始終使用具體CSS規(guī)則，并限制它們的作用范圍，使用BEM或其他限制范圍的方法。

eyJpZCI6MTIzLCJvcmciOiJqaWFuZGVhZyJ9