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