angular組件樣式不生效

在本週的項目中有一個需求，對處於兩種不一樣狀態的計算機列表賦予不一樣的顏色方便更加醒目的區分，完工後的效果以下。

解決思路——rowClassName

項目使用了ng-alain,做者提供了許多方便的方法與屬性，因此解決這個問題並不太難，張喜碩學長直接給我說了使用rowClassName這個屬性。
0

開始的時候我覺得這個類名是對象那個類，還在思考應該怎麼寫，後來聽張喜碩學長一說才明白，這是css的那個類，那就簡單了。

再寫出相應的判斷方法

/**
     * @Description: 設置行背景
     * 返回class名
     */
    public setRowColor(record: Host, index: number) {
        if (record.status === 1) {
            return 'greenRow';
        }
    }

css

.greenRow {
    background-color: #52c41a;
}

大功告成，查看測試效果——沒有效果……

怎麼回事？難道思路是錯的？
打開開發者工具，class已經附上了，可是卻沒有相應的css

失敗的緣由

我猜想產生上面這種現象的緣由是，是由於組件的樣式進行了封裝，而這種給他css的方式時，它沒有引用相應的css的文件

若是猜想有誤，請指出，不勝感激。

關於封裝

封裝模式有三種，分別是：

• Native 原先瀏覽器Shadow DOM行爲。
• Emulated 仿真模式，經過Angular來模擬相似Shadow DOM的行爲。
• None 無任何封裝行爲。

想更加深刻的瞭解，能夠看這篇文章。

解決辦法

難道咱們沒有辦法侵犯第三方組件了嗎？好在 Angular 提供了一種對將來工具更好兼容性的命令 ::ng-deep 來強制樣式容許侵入子組件。

css修改以下：

::ng-deep .greenRow {
    background-color: #52c41a;
}

成功了

（寫到這裏不得不提一句，實際上要完成需求根本不須要這樣麻煩，ng-alain內部已經提供了顏色的樣式, 直接使用便可。）

Shadow DOM

angualr的組件其實是Shdow Dom.
Shadow DOM它容許在文檔（document）渲染時插入一棵DOM元素子樹，可是這棵子樹不在主DOM樹中。

所以開發者可利用Shadow DOM 封裝本身的 HTML 標籤、CSS 樣式和 JavaScript 代碼。

關於Shadow DOM的具體部分能夠看這篇文章神奇的Shadow DOM