Как создать определенный компонент углового материала?

Question

Я использую угловой материал 2, но я думаю, что это также относится и к угловому материала 1.

Допустит, я хочу использовать угловые материальные вкладки, но я хочу, чтобы скрыть вкладки или добавить некоторые специфические стили к нему ,

Поэтому у меня есть следующий HTML/угловой код материала:

<md-tab-group> 
    <md-tab> 
     <template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0" 
      Some tab 
     </template> 
     <template md-tab-content> 
      Some content. Perhaps other tab components. 
     </template> 
    </md-tab> 
    <md-tab> 
     <template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0" 
      Some tab 
     </template> 
     <template md-tab-content> 
      Some content. Perhaps other tab components. 
     </template> 
    </md-tab> 
</md-tab-group> 

Если добавить класс к «шаблон мд-закладка метке» -tag не добавляются в любом месте в структуре DOM. Я не могу просто создать класс «md-tab-label», потому что это применило бы стиль везде и ко всем вкладкам. Если я использую его из родительского элемента, он применим ко всем вложенным компонентам табуляции, которые могут присутствовать в содержимом вкладки. Если я попытаюсь ограничить глубину и создать действительно действительно специфический селектор, основанный на конечном представлении DOM, я бы применял стиль в структуре, которую я не контролирую и которая может измениться при любом обновлении.

Есть ли правильный способ сделать это или мне просто нужно создать селектор, деконструируя структуру DOM?

Answer 1

Вы можете переопределить стиль материала из вашего scss/css. Как это:

/deep/ .mat-tab-group.mat-primary .mat-ink-bar{ background-color: red; }

Благодаря зрения инкапсуляции, вам нужно использовать /глубоко/ селектор, который позволит вам разжиться материала класса добавляется, когда компонент визуализируется.