角形材料- CSS不适用于组件的内部元素

x759pob2 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(144)

我正在使用Angular Material中的MatExpansionPanel。当我检查生成的html时，我得到了如下所示的内容

<mat-expansion-panel _ngcontent-lnt-c367="" class="mat-expansion-panel ng-tns-c278-0 mat-expanded ng-star-inserted" ng-reflect-expanded="true">
   <div role="region" class="mat-expansion-panel-content ng-tns-c278-0 ng-trigger ng-trigger-bodyExpansion" id="cdk-accordion-child-0" aria-labelledby="mat-expansion-panel-header-0" style="visibility: visible;">
       <div class="mat-expansion-panel-body ng-tns-c278-0"> 
         ...
       </div>
   </div>
</mat-expansion-panel>

第一个div（带有mat-expansion-panel-content类）有很多空格，我想删除它们，但在此之前，我尝试了css选择器，如下所示

ion-menu mat-expansion-panel {
    background-color: green; /* works */
}
ion-menu mat-expansion-panel .mat-expansion-panel-content {
    background-color: red; /* doesn't work */
    margin: 0;
}

我试着检查div是否有其他样式使用!important，我发现我的css根本不存在。有什么线索吗？

css

来源：https://stackoverflow.com/questions/75781523/angular-material-css-not-working-on-components-inner-elements

1条答案

按热度按时间

jjjwad0x1#

你有3个方法可以用来访问其他组件中的内部css选择器。

方法1 -全局样式表

首先你可以给予mat-expantion-panel一个类名，然后你可以用你的global .s（css）访问它，但是我只会在你要重复的时候这样做。
示例：

// component.html
...
<mat-expantion-panel class="bg-red">...</mat-expantion-panel>
...
// styles.scss (not component.scss)
mat-expantion-panel {
   &.bg-red {
     .mat-expansion-panel-content {
       background-color: red; /* should now work */
       margin: 0;
     }
   }
}

方法2 -使用ng-deep

用途：：ng-deep，这意味着您将css渗透到全局空间（打破组件样式隔离），因此为了避免它意外地更改某些内容，请在组件中使用带有:host的模式。scss
注意：这是首选的方法。如果你关心组件的隔离，那么样式的改变就与组件保持一致。
示例：

:host ::ng-deep {
  // you can no target the inner / generated css selectors from here.
  .mat-expansion-panel-content {
     background-color: red; /* should now work */
     margin: 0;
   } 
}

方法3 -查看封装。无（很少使用/不喜欢使用）

在你的组件上使用Change the viewEncapsulation.none。这意味着你把整个css放到全局空间中。如果你做了一个UI库，只使用我能想到的使用这个方法的原因，否则我不会用这个方法

赞(0）回复(0）举报 2023-03-20

我来回答

角形材料- CSS不适用于组件的内部元素

1条答案

相关问题

热门标签

最新问答