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

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

0 голосов
/ 08 ноября 2018

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

ех. 

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

Извините, Stackoverflow заставляет меня комментировать некоторые ненужные вещи, которые вы можете увидеть с помощью 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>

РЕДАКТИРОВАТЬ:

На самом деле вы можете переопределить такие элементы (например, mat-tab углового материала), используя :: нг глубины

Ответы [ 2 ]

0 голосов
/ 07 июня 2019

Вот простой способ решить вашу проблему. Примените пользовательский 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%;
}
0 голосов
/ 22 января 2019

Это из-за Просмотр инкапсуляции .По умолчанию 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), но будьте осторожны, это действие повлияет на все ваши тела на вкладках материалов.

...