且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

角度材料自定义选项卡

更新时间:2023-01-05 20:44:40

在你的组件中,设置 ViewEncapsulationNone 并在你的 component.css 文件中添加样式.

In your component, set ViewEncapsulation to None and add the styles in your component.css file.

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;
}

演示