Html 更改一个精确的mat选项卡背景颜色-角度材质

Html 更改一个精确的mat选项卡背景颜色-角度材质,html,css,angular,angular-material,mat-tab,Html,Css,Angular,Angular Material,Mat Tab,我想改变一个精确的垫子标签背景颜色,有一个解决方案,这是工作,但有点比需要更复杂 我有这个当前的代码,但我想删除带有aria标签id的第一个按钮 HTML: <div> <mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup" value="custom"> <mat-button-toggle value="custom"> custom </mat-but

我想改变一个精确的垫子标签背景颜色,有一个解决方案,这是工作,但有点比需要更复杂

我有这个当前的代码,但我想删除带有aria标签id的第一个按钮

HTML:

<div>
  <mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup" value="custom">
    <mat-button-toggle value="custom"> custom </mat-button-toggle>
  </mat-button-toggle-group>
</div>

<mat-tab-group>
  <mat-tab label="First" [aria-label]=backgroundColorToggle.value> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
</mat-tab-group>
[aria-label=custom] {
  background-color: #5473a1;
  color: #ffffff;
}
我想做一些更简单的事情,但它不起作用:

<mat-tab-group>
  <mat-tab label="First" [aria-label]="custom"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
</mat-tab-group>

内容1
内容2

谢谢

这应该针对第一个选项卡(主体)


这应该针对第一个选项卡(主体)


这就是我找到的解决方案:

.mat-tab-label-content {
    .my-tab-color {
        &.my-tab-color-green {
            background-color: $mygreen;
            color: white;
        }
    }
}

这就是我找到的解决方案:

.mat-tab-label-content {
    .my-tab-color {
        &.my-tab-color-green {
            background-color: $mygreen;
            color: white;
        }
    }
}

你可以添加精确的CSS。我没有找到任何方法来选择精确的mat选项卡,我无法在其中添加类(或者我不知道如何,class=”“不工作),我可以使用ng模板更改文本颜色,并在我的选项卡中添加一个跨距,但无法选择选项卡本身。你是否尝试使用
id
然后使用
CSS
对其进行样式化?你能提供一个
stackblitz
?不,物料生成新元素si类和ID丢失。。。但是我找到了一个解决方案,明天我会上传的!Thx Tho你可以添加精确的CSS。我没有找到任何方法来选择精确的mat选项卡,我无法在其中添加类(或者我不知道如何,class=”“不工作),我可以使用ng模板更改文本颜色,并在我的选项卡中添加一个跨距,但无法选择选项卡本身。你是否尝试使用
id
然后使用
CSS
对其进行样式化?你能提供一个
stackblitz
?不,物料生成新元素si类和ID丢失。。。但是我找到了一个解决方案,明天我会上传的!Thx tho