我尝试了多种方法在我的 CSS 中调用 mat-tab
和 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 中正确调用这些元素,以便修改它们的样式?
最佳答案
试试 :host::ng-deep .mat-tab-header { } 如果仍然没有变化,请添加 !important。
关于html - 无法使用 mat-tab 或 mat-ink-bar (Angular) 自定义 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48671525/