所以我只是创建了一个扩展面板,它的工作很好(它是非常硬编码虽然)。我需要,但是,消除填充完全从子面板的一部分,我找不到一个适当的方法来做到这一点。
下面是面板:
https://i.stack.imgur.com/hLoKn.png
您可以注意到有一个我想要消除的白色边框(经过检查,在div.mat-expansion-panel-body部分中,有一个填充。当我将其设置为0时,它会修复,白色边框消失。我在我的.css中尝试了以下操作:
div.mat-expansion-panel-body {
padding: 0 !important;
}
但是没有用。如果有人有办法解决这个问题,我将不胜感激。
3条答案
按热度按时间wfypjpf41#
将样式添加到
styles.css
中,这是全局样式,但这将影响整个应用程序中的所有mat-expansion。当你将它添加到你的组件样式 * 而不是添加到全局
styles.css
中时,它不起作用的原因是样式被封装了,mat-expansion-body
是在该组件的样式之外创建的。如果你想避免这种风格出现在每个mat-expansion-panel-body上,你可以创建一个类,例如
remove-mat-expansion-padding
,并像这样把它交给mat-expansion-panel:然后在您的
styles.css
中以便样式仅适用于添加了类
remove-mat-expansion-panel-padding
的mat-expansion-panel
,而不是应用程序中的所有扩展面板f8rj6qna2#
mat-expansion-panel-body
由Material内部创建。例如另一个材质组件,对这些组件应用更改(主要是样式)是非常困难的。
解决此问题的替代方法是从组件中删除模拟封装,设置为
ViewEncapsulation.None
。但是,这样,应用到组件中的样式(css选择器,如类,标签,id等)可用于应用程序的所有组件。为了防止应用程序中出现封装样式问题,最好将
#id
应用于组件容器(在本例中为mat-expansion-panel
),并在#id
CSS选择器中使用组件样式,如示例所示:使用CSS
#id
选择器和组件名称的想法是防止其他组件具有相同的样式(或多或少地“封装”到#component-name
样式选择器中,因为封装是none
,所以可用于所有应用程序组件)。希望我帮上忙了
zdwk9cvp3#
您可以尝试下一种方法(使用SCSS):