无法使用:: ng-deep和！重要样式设置mat-tab [英] Cannot style mat-tab without ::ng-deep and !important

问题描述

我有一些在HTML中使用mat-tab元素的组件。尝试在CSS中设置这些元素的样式时，我只能使用 :: ng-deep .mat-tab-label {} 来设置样式，例如， code>！important 至少有一个样式更改。我不想长期留在应用程序中，特别是在阅读 ：

 < mat-card class =mat-card> 
< mat-tab-group class =mat-tab-group mat-primary> 
< mat-tab-header class =mat-tab-header> 
< div class =mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled> 
< div class =mat-tab-label-container> 
< div class =mat-tab-list> 
< div class =mat-tab-labels> 
< div class =mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted> 
< mat-ink-bar class =mat-ink -bar> 
  

如何在不使用<$ c $的情况下对这些元素进行样式化c> :: ng-deep 和！important 在CSS中

解决方案

为了在不使用:: ng-deep
和！CSS中的重要元素的情况下对这些元素进行样式化，我能做些什么？

在这种情况下，您可以执行的解决方案是使用选择器特性，然后将样式置于根样式/ src / styles.css
（注意：这样做没有把它放在组件styleUrls中，你的样式将不起作用）

  / *标签样式* / 
。 mat-tab-label {
 background：green; 
颜色：白色; 
} 
 / *焦点样式* / 
 .mat-tab-group.mat-primary .mat-tab-label：not（.mat-tab-disabled）：focus，.mat -tab-group.mat-primary .mat-tab-link：not（.mat-tab-disabled）：focus，.mat-tab-nav-bar.mat-primary .mat-tab-label：not（.mat禁用（.mat-tab-disabled）：焦点，.mat-tab-nav-bar.mat-primary .mat-tab-link：not（.mat-tab-disabled）：focus {
 background：red; 
} 
 / *墨水条样式* / 
 .mat-tab-group.mat-primary .mat-ink-bar，.mat-tab-nav-bar.mat-primary。 mat-ink-bar {
 background：yellow; 
 height：10px; 
} 
  

要查看实时示例代码，请参阅此链接 -
< a href =https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css =nofollow noreferrer> https://stackblitz.com/edit/dmgrave -ng-so-anser-tabs-style？file = styles.css

希望这有助于。

I have some components which use the mat-tab elements in the HTML. When trying to style these elements in the CSS, I am only able to style them using ::ng-deep .mat-tab-label {} for example, and putting !important next to at least one of the style changes. I do not want to leave this in the application long-term, especially after reading this article.

Here is how it breaks down looking at the elements in developer tools:

<mat-card class="mat-card">
  <mat-tab-group class="mat-tab-group mat-primary">
    <mat-tab-header class="mat-tab-header">
      <div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled>
      <div class="mat-tab-label-container">
        <div class="mat-tab-list">
          <div class="mat-tab-labels">
            <div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted">
            <mat-ink-bar class="mat-ink-bar">

What can I do in order to style these elements without using ::ng-deep and !important in the CSS?

解决方案

What can I do in order to style these elements without using ::ng-deep and !important in the CSS?

In this case the solution that you can do is to use Selector specificity and then put your style in the root style /src/styles.css (NOTE: that don't put it in the components styleUrls your style will not work)

/* label style */
.mat-tab-label{
  background: green;
  color:white;
}
/* focus style */
.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus{
  background: red;
}
/* ink bar style */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: yellow;
  height: 10px;
} 

To see the live sample code please see this link - https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css

Hope this helps.

这篇关于无法使用:: ng-deep和！重要样式设置mat-tab的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！