使用 angular 的仿真模式封装样式时可能会遇到在 css 文件声明的样式不生效的问题。
原因
仿真模式生成的类名会自动加上属性,以将样式封装在组件内部,避免影响其他组件。
默认使用仿真模式 css 文件中的样式
封装后的样式
而如果使用 svg 绘图或其他三方组件时,其内部不会带有该属性,样式自然不会生效。使用代码生成 svg 图象时,期望样式生效的元素上并没有 _ngcontent-c1 属性
代码中生成的 svg 图像
解决方式
此时解决方式通常有以下几种:
- 直接将样式写在 index.html 中作为全局样式
-
单独写在一个样式文件中,在 angular.json 文件中引入该文件
angular.json 文件中引入 css 文件
3.不使用仿真模式,即不封装该组件的样式,会引入到全局环境中。生成的样式文件中的样式上不会带有 ngcontent 类似的属性选择器
不使用仿真模式
- 使用 angular 提供的 强制样式浸入子组件的功能。:host 代表组件本身,::ng-deep 代表其后的选择器不会带有 ngcontent 属性,
:host ::ng-deep .MyRect {
fill: steelblue;
}
输出的 css 文件如下
输出样式
如果需要运用 :host ::ng-deep 的样式较多,还可以使用 scss 样式文件,添加一个总的样式类将需要浸入的组件包裹起来,然后在该类前面使用 :host ::ng-deep
用于包裹组件的样式类
生成的 css 样式
使用场景
- 使用 d3 绘图时,在代码里面使用类名时无法引用到 svg 内部
- 使用其他组件,如 antd 时,想要修改 antd 组件内部样式
网友评论