角度材质自定义选项卡

Question

我正在使用角4,我正在使用Angular Material.

<md-tab-group [disableRipple]=true>
    <md-tab label="Tab 1"></md-tab>
    <md-tab label="Tab 2"></md-tab>
</md-tab-group>

如何(未选择/选择),文本颜色等我可以完全自定义背景颜色.我已经尝试过使用伪类......但仍无济于事.---我已font-size成功设置,但文本颜色设置时有点紧张.请帮忙.

更新:

我已经尝试在选中后将背景更改为透明...当在选项卡中未选择链接时尝试覆盖颜色等等但仍然无法正常工作.

/* Styles go here */

  .mat-tab-label{
    color:white;
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
  }

  /deep/ .mat-tab-label{
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
}

.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active{
      background-color:transparent;
      color:white;
      font-weight: 700;
  }

.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple{
    background-color:transparent;
    color:white;
    font-weight: 700;
}



.mat-tab-label:active{
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
}

.mat-tab-label:selected{
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
}

Answer 1

在组件中,将ViewEncapsulation设置为,None并在component.css文件中添加样式.

Typescript代码的变化:

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

组件CSS:

/* Styles for tab labels */
.mat-tab-label {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the ink bar */
.mat-ink-bar {
    background-color: green;
}

演示

Answer 2

如果您不想触摸ViewEncapsulation,请使用:: ng-deep代替类选择器(通过浏览器开发工具检查).

例如(Angular 5,Material 2):

<div class="my-theme">
    <mat-tab-group [backgroundColor]="'primary'" [color]="'warn'">
        <mat-tab label="First"> Content 1 </mat-tab>
        <mat-tab label="Second"> Content 2 </mat-tab>
        <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>
</div>

Answer 3

最新解决方案：-

1）覆盖styles.css 2）使用该材质选项卡所在位置的组件选择器

样式文件

  app-child .mat-tab-label.mat-tab-label-active {
    padding: 0px 15px ;
  justify-content: flex-start;
  }

  app-child .mat-tab-label{
    padding: 0px 15px ;
  justify-content: flex-start;
  }

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
    background:#6168e7;
  }