英文:
Angular V15 how to change style of active tab in mat-tab
问题
我想在mat-tab中通过在scss中定义来更改活动选项卡的样式：
.mat-tab-list .mat-tab-labels .mat-tab-label-active{
background-color: 某颜色
}
在v14版本中有效，但在v15版本中无效。
英文:
Angular V15 how to change style of active tab in mat-tab
I want to change style of active tab in mat-tab by define in scss:
.mat-tab-list .mat-tab-labels .mat-tab-label-active{
background-color: some-color
}
It was working on v14 but not in v15.
答案1
得分: 2
Mat-Tab 是一个外部库，可以以封装的方式实现，您可以查看此链接和此链接以了解 Angular 在视图封装和样式方面的工作方式。
在以前的 Angular 版本中，您可能需要使用::ng-deep在::host选择器之前，但这实际上已经不推荐使用，并且使用它意味着您正在实现遗留代码，参考这个长时间的讨论。
实际上，我不确定您如何实现您的完整代码，但假设您的视图代码结构如下所示，您想要定位mat-tab-label-active类：
<!-- app.component.html -->
<mat-tab></mat-tab>
<!-- 假设前一行在浏览器中生成以下DOM结构： -->
<mat-tab>
<element1 class="mat-tab-list">
<element2 class="mat-tab-labels">
<element3 class="mat-tab-label-active">
</element3>
</element2>
</element1>
</mat-tab>
为此，我建议查看这个类似官方的回答，并将您的代码重构为以下方式：
<!-- app.component.html -->
<mat-tab class="my-mat-tab"></mat-tab>
/* app.component.css */
mat-tab.my-mat-tab .mat-tab-list .mat-tab-labels .mat-tab-label-active{
background-color: some-color
}
/** app.component.ts **/
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None // <------ This is Important
})
export class AppComponent {
}
快速解释：
- 在 TypeScript 组件级别，我们通过设置
encapsulation: ViewEncapsulation.None来禁用了视图封装策略，以确保我们的组件样式可自定义。 - 但是，使样式在全局/可自定义可能会影响同一页面中保存相同组件的其他
mat-tab样式。因此，为了避免这种情况，我们为mat-tab设置了一个自定义类，只针对它，例如：<mat-tab class="my-mat-tab"></mat-tab>。 - 最后，在 CSS 文件中通过选择目标类的整个路径来定位
mat-tab容器及其子元素。
**PS：**目前，在 Angular 文档和 Angular GitHub 讨论中没有其他替代方案，但希望他们可以添加更清晰和高效的内容来替代::ng-deep选择器。
英文:
Mat-Tab is an external library that can be implemented in an encapsuled way, you can check this link and this link too to understand how Angular works in a term of View Encapsulation & Styling.
In the past versions of Angular you may had to use ::ng-deep preceded by ::host selectors, But this is actually DEPRECATED and using it means you are implementing a legacy code according to this long discussion.
Actually, I'm not sure about how you implemented your full code, but lets say that the structure of your View code is implemented that way below and you want to target mat-tab-label-active class:
<!-- app.component.html -->
<mat-tab></mat-tab>
<!-- lets say the previous line would generate the dom this way in the Browser: -->
<mat-tab>
<element1 class="mat-tab-list">
<element2 class="mat-tab-labels">
<element3 class="mat-tab-label-active">
</element3>
</element2>
</element1>
</mat-tab>
For that I would recommend to check this official-like answer and refactor your code this way:
<!-- app.component.html -->
<mat-tab class="my-mat-tab"></mat-tab>
/* app.component.css */
mat-tab.my-mat-tab .mat-tab-list .mat-tab-labels .mat-tab-label-active{
background-color: some-color
}
/** app.component.ts **/
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None // <------ This is Important
})
export class AppComponent {
}
Quick Explication:
- In the typescript component level, we disabled the view encapsulation strategy by setting up :
encapsulation: ViewEncapsulation.Noneto make sure that our component styles are exposed to be customizable. - However, making styles exposed globally/customizable would maybe impact other
mat-tabstyles in the same page that holds the same component. So to avoid that we setup a custom class tomat-tabto just only target it, exemple:<mat-tab class="my-mat-tab">. - finally target the
mat-tabcontainer and its sub-elements in the css file by selecting the whole path of the target class.
PS: for now, there is no other alternatives in Angular docs neither in Angular Github discussions, but hopefully they can add something more clear and effecient to replace ::ng-deep selector.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论