我有一些组件在 HTML 中使用 mat-tab 元素。当尝试在 CSS 中设置这些元素的样式时，我只能使用::ng-deep .mat-tab-label {}例如，并放置!important在至少一个样式更改旁边。我不想把这个长期留在应用程序中，尤其是在阅读了这篇文章之后。
以下是它如何分解查看开发人员工具中的元素：
<mat-card class="mat-card">
<mat-tab-group class="mat-tab-group mat-primary">
<mat-tab-header class="mat-tab-header">
<div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled>
<div class="mat-tab-label-container">
<div class="mat-tab-list">
<div class="mat-tab-labels">
<div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted">
<mat-ink-bar class="mat-ink-bar">
我能为了做样式而不使用这些要素::ng-deep并!important在CSS？
我尝试了多种方法在CSS中调用mat-taband mat-ink-bar。我有类似这样的HTML，例如：
</div>
<mat-card>
<mat-tab-group>
<mat-tab label="Login">
<app-login></app-login>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>
我正在该组件的CSS中自定义样式。我可以进入开发人员工具并直接在浏览器中修改元素的CSS，但是在CSS文件中调用这些元素时遇到了困难。
单击该特定元素后，在开发人员工具的“样式”部分中，我可以看到它位于下方.mat-tab-header，并且成功修改了一些值。我在CSS文件中调用它时无法正常工作。
元素分解如下（希望这会有所帮助）：
<mat-card class="mat-card">
<mat-tab-group class="mat-tab-group mat-primary">
<mat-tab-header class="mat-tab-header">
<div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled>
<div class="mat-tab-label-container">
<div class="mat-tab-list">
<div class="mat-tab-labels">
<div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted">
<mat-ink-bar class="mat-ink-bar">
如何在CSS中正确调用这些元素，以便修改其样式？
我正在使用 PrimeNG 表，并且我想以编程方式处理保存行编辑，以防在编辑模式下存在任何需要事先解决的自定义验证错误。目前，我已将 pSaveEditableRow 添加到一个按钮，单击该按钮即可结束行编辑并保存对该行所做的编辑。我需要覆盖它并预先进行一些验证。如何才能做到这一点？
我查看了 PrimeNG 的文档，看起来我可以调用“saveRowEdit”函数，但我需要传递 rowData 和 rowElement，它们都来自 pEditableRow，并且 pEditableRow 似乎设置为具有表所需属性的对象。