typescript 如何强制更换垫子膨胀板主体内的填充物?

knsnq2tg  于 2023-06-07  发布在  TypeScript
关注(0)|答案(3)|浏览(162)

所以我只是创建了一个扩展面板,它的工作很好(它是非常硬编码虽然)。我需要,但是,消除填充完全从子面板的一部分,我找不到一个适当的方法来做到这一点。
下面是面板:
https://i.stack.imgur.com/hLoKn.png
您可以注意到有一个我想要消除的白色边框(经过检查,在div.mat-expansion-panel-body部分中,有一个填充。当我将其设置为0时,它会修复,白色边框消失。我在我的.css中尝试了以下操作:

div.mat-expansion-panel-body {
  padding: 0 !important;
}

但是没有用。如果有人有办法解决这个问题,我将不胜感激。

wfypjpf4

wfypjpf41#

将样式添加到styles.css中,这是全局样式,但这将影响整个应用程序中的所有mat-expansion。

div.mat-expansion-panel-body {
  padding: 0 !important;
}

当你将它添加到你的组件样式 * 而不是添加到全局styles.css中时,它不起作用的原因是样式被封装了,mat-expansion-body是在该组件的样式之外创建的。
如果你想避免这种风格出现在每个mat-expansion-panel-body上,你可以创建一个类,例如remove-mat-expansion-padding,并像这样把它交给mat-expansion-panel:

<mat-expansion-panel class="remove-mat-expansion-panel-padding">

然后在您的styles.css

.remove-mat-expansion-panel-padding .mat-expansion-panel-content .mat-expansion-panel-body{
    padding: 0 !important;
}

以便样式仅适用于添加了类remove-mat-expansion-panel-paddingmat-expansion-panel,而不是应用程序中的所有扩展面板

f8rj6qna

f8rj6qna2#

mat-expansion-panel-body由Material内部创建。
例如另一个材质组件,对这些组件应用更改(主要是样式)是非常困难的。
解决此问题的替代方法是从组件中删除模拟封装,设置为ViewEncapsulation.None。但是,这样,应用到组件中的样式(css选择器,如类,标签,id等)可用于应用程序的所有组件。
为了防止应用程序中出现封装样式问题,最好将#id应用于组件容器(在本例中为mat-expansion-panel),并在#id CSS选择器中使用组件样式,如示例所示:

<mat-expansion-panel id="my-component-name-style-container">
   <!-- your content -->
</mat-expansion-panel>
#my-component-name-style-container mat-expansion-panel-body {
   padding: 0;
}

使用CSS #id选择器和组件名称的想法是防止其他组件具有相同的样式(或多或少地“封装”到#component-name样式选择器中,因为封装是none,所以可用于所有应用程序组件)。
希望我帮上忙了

zdwk9cvp

zdwk9cvp3#

您可以尝试下一种方法(使用SCSS):

::ng-deep {
    mat-expansion-panel {
        .mat-expansion-panel-body {
            padding: 0;
        }
    }
}

相关问题