Mat-tab-body-wrapper, не может редактировать css (угловой)

Question

Я не могу изменить обертку тела вкладыша мата, которая ограничивает размер вкладки мата.

ех.

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

Извините, Stackru заставляет меня комментировать некоторые ненужные вещи, которые вы можете увидеть с помощью NG-шаблона и моей гистограммы.

  <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

Это из-за View Encapsulation. По умолчанию угловые рамки стилей, так что если вы пишете в своем 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

Это устраняет проблему:

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

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