Question

我无法更改mat标签的主体包装，这似乎限制了mat标签的尺寸。

例如。

.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>

Answer 1

可解决此问题：

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

Answer 2

这是因为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 3

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

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

将ViewEncapsulation导入“ @ angular / core”

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%;
}

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

3 个答案: