angular 12 ng-deep 使用注意事项

ng-deep 使用

a.scss

::ng-deep {
    a {
        color: #fff;
    }
}

ng-deep 表示里面的样式是公共的，需要影响子组件的样式。

可以理解为 vue 中的不带 scoped 属性的 style 标签

上面的样式表示，当打开 a 组件之后，样式开始生效，如果从 a 离开了样式依然会起作用，

注意

::ng-deep 里面的样式是影响全局的，如果想只作用与一个模块下

请使用一个规则名放在最外面

.page ::ng-deep {
    a {
        color: #fff;
    }
}