Mat-tab-body-wrapper，无法编辑 css（角度）

Question

我无法更改 mat tab body wrapper，这似乎限制了我的 mat-tab 的大小。

前任。

.mat-tab-body-wrapper {
  height: 100%:
}

抱歉，Stackoverflow 迫使我注释掉一些不必要的东西，正如您在 NG-template 和我的条形图上看到的那样。

  <mat-tab-group mat-stretch-tabs>
     <mat-tab>
        'angular template and mat tab label'
              'extraneous elements'
        'end angular template and mat table label'
        <div class="container">
           'extraneous elements'
              <div style="display: block">
                 <canvas> 
                   /*My Bar chart*/
                 </canvas>
              </div>
        </div>               
     </mat-tab>
  </mat-tab-group>

编辑：

您实际上可以使用 ::ng-deep 覆盖这样的元素（即角材料的 mat-tab）

Answer 1

这是因为View Encapsulation。默认情况下，Angular 限定样式，所以如果你在my-component.component.css下面写

mat-tab-body-wrapper {
   height: 100%;
}

然后css编译成类似的东西

[_nghost-c15] mat-tab-body-wrapper[_ngcontent-c15] { 
   height: 100%;
}

因此不应用样式，因为选择器不匹配。

要解决您的问题，只需css在全局样式表（即styles.css）中复制您的问题，但要小心，此操作会影响您的所有材质选项卡。

Answer 2

这是解决问题的简单方法。将自定义 css 应用于元素。

<mat-tab-group class="custom-tabs"></mat-tab-group>

在“@angular/core”中导入 ViewEncapsulation

import { Component,ViewEncapsulation  } from '@angular/core';

在显示选项卡的组件中禁用视图封装。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

您现在可以设置 .mat-tab-body 和 .mat-tab-body-wrapper 的样式。

.custom-tabs .mat-tab-body-wrapper {
  height: 100%;
}

Answer 3

这解决了这个问题：

:host ::ng-deep .mat-tab-body-wrapper {
    height: 100%;
}