css 角材料垫-膨胀-面板-主体样式未应用

aurhwmvo  于 2023-04-23  发布在  其他
关注(0)|答案(8)|浏览(101)

我在组件的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文件中样式化这个元素的更好的解决方案是什么?

ldfqzlk8

ldfqzlk81#

我在组件css中设置了::ng-deep,它在我这边工作。

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

1qczuiv02#

对于"@angular/material": "^10.2.7"

encapsulation: ViewEncapsulation.None属性添加到@Component装饰器中

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None
})
export class examplePage{}

然后这个CSS将与工作很好!重要

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

请注意,::ng-deep/deep/将无法在新版本的angular/material上工作

wh6knrhe

wh6knrhe3#

如果你不想用途::ng-deep,一个可能的解决方案是在styles.css文件中设置样式,如下所示。

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

这将删除填充,但要小心,因为它将从所有的mat-expansion-panel-body元素中删除它。

.my-special-class .mat-expansion-panel-body {
  padding: 0;
}

在这种情况下,你甚至不需要!important。下面是这个例子。
https://stackblitz.com/edit/angular-a6necw

svgewumm

svgewumm4#

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

现在您不必考虑将此样式应用于所有组件。

xwbd5t1u

xwbd5t1u5#

下面是它是如何为我工作的:

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

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,但在我的团队中,我们选择了第四个选项。

gpnt7bae

gpnt7bae7#

Please use ngdeep code here before all inbuilt classes in angular 
::ng-deep .mat-expansion-panel-body{
     padding: 0;
}
qzlgjiam

qzlgjiam8#

对自定义类使用ng-deep以避免样式传播

::ng-deep .nav-expansion-panel {
   .mat-expansion-panel-content{
   .mat-expansion-panel-body {
       padding: 0 5px  !important;
   }
  }
 }

相关问题