10

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

前任。

.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 覆盖这样的元素（即角材料的垫子）

4

3 回答 3

11

这是因为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），但要小心，此操作会影响材质选项卡中的所有主体。

于 2019-01-22T17:38:55.000 回答
7

这解决了这个问题：

:host ::ng-deep .mat-tab-body-wrapper {
    height: 100%;
}
于 2020-01-10T04:47:38.810 回答
6

这是解决问题的简单方法。将自定义 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%;
}
于 2019-06-07T08:11:45.617 回答