我在组件的css文件中有以下css:
.mat-expansion-panel-body {
padding: 0;
}
所以,我希望看到这个规则(即使被覆盖)在下面的dom元素中显示:
<div class="mat-expansion-panel-body">...</div>
但是,我在开发工具中看到的应用是:
.mat-expansion-panel-body {
padding: 0 24px 16px;
}
我注意到这个元素没有其他 host 元素所拥有的***_ngcontent-c19***类,所以我假设这是视图封装的情况。
然而,在阅读了::ng-deep和/deep/以及其他被弃用的封装穿透结构之后,从我的组件的css文件中样式化这个元素的更好的解决方案是什么?
8条答案
按热度按时间ldfqzlk81#
我在组件css中设置了
::ng-deep
,它在我这边工作。1qczuiv02#
对于
"@angular/material": "^10.2.7"
将
encapsulation: ViewEncapsulation.None
属性添加到@Component装饰器中然后这个CSS将与工作很好!重要
请注意,
::ng-deep
和/deep/
将无法在新版本的angular/material上工作wh6knrhe3#
如果你不想用途::ng-deep,一个可能的解决方案是在styles.css文件中设置样式,如下所示。
这将删除填充,但要小心,因为它将从所有的mat-expansion-panel-body元素中删除它。
在这种情况下,你甚至不需要!important。下面是这个例子。
https://stackblitz.com/edit/angular-a6necw
svgewumm4#
现在您不必考虑将此样式应用于所有组件。
xwbd5t1u5#
下面是它是如何为我工作的:
y1aodyip6#
我将汇总所有答案并给予一些解决方案:
1.在你的组件CSS中使用
ng-deep
,就像::ng-deep .mat-expansion-panel-body
一样--这是一个不错的解决方案,但是Angular团队决定放弃ng-deep
1.使用
encapsulation: ViewEncapsulation.None
-我个人认为是最糟糕的解决方案,因为你将设置全局类,这可能会与现有的,新的类或动态类(如某些网站上的广告)冲突1.全局
styles.(s)css
中的component-name .mat-expansion-panel-body
-唯一的缺点是,您必须维护选择器,以防有人重命名组件的选择器。1.移动全局
styles.(s)css
文件中的.mat-expansion-panel-body { padding: 0 }
并从现在开始影响所有mat-expansion
的组件。就我个人而言,我仍然更喜欢选项1或3,但在我的团队中,我们选择了第四个选项。
gpnt7bae7#
qzlgjiam8#
对自定义类使用ng-deep以避免样式传播