要解决Angular 7中mat-tab活动状态样式不反映的问题,你可以按照以下步骤进行操作:
确保你已经正确地导入了@angular/material
模块和主题样式表。
在组件的HTML文件中,使用mat-tab-group
和mat-tab
元素来创建标签页组件。
Tab 1 content
Tab 2 content
Tab 3 content
.mat-tab-group {
// 修改标签页组件的样式
}
.mat-tab-label {
// 修改标签的样式
}
.mat-tab-label-active {
// 修改活动状态标签的样式
}
.mat-tab-body {
// 修改标签内容的样式
}
:host
伪类选择器来选择标签组件,并为其添加样式。:host ::ng-deep .mat-tab-label-active {
// 修改活动状态标签的样式
}
import { MatTabsModule } from '@angular/material/tabs';
@NgModule({
imports: [
MatTabsModule
],
// ...
})
export class YourModule { }
通过按照上述步骤操作,你应该能够解决Angular 7中mat-tab活动状态样式不反映的问题。