我有一些组件使用 HTML 中的 mat-tab 元素。当尝试在 CSS 中设置这些元素的样式时,我只能使用例如 ::ng-deep .mat-tab-label {}
设置它们的样式,并放置 !important
至少在其中一项样式更改旁边。我不想在应用程序中长期保留它,尤其是在阅读 this 之后文章。
以下是它如何分解开发人员工具中的元素:
<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 中的 ::ng-deep
和 !important
的情况下如何设置这些元素的样式?
最佳答案
What can I do in order to style these elements without using ::ng-deep and !important in the CSS?
在这种情况下,您可以做的解决方案是使用Selector specificity,然后将您的样式放在根样式/src/styles.css 中 (注意:不要将它放在组件 styleUrls 中,您的样式将不起作用)
/* label style */
.mat-tab-label{
background: green;
color:white;
}
/* focus style */
.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus{
background: red;
}
/* ink bar style */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
background: yellow;
height: 10px;
}
要查看实时示例代码,请查看此链接 - https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css
希望这对您有所帮助。
关于html - 没有::ng-deep 和 !important 就不能设置 mat-tab 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48689878/