我有一些使用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">
我该怎么做才能在不使用::ng-deep
和!important
的情况下设置这些元素的样式呢?
发布于 2018-02-09 00:22:39
我该怎么做才能在不使用::ng-deep和!important的情况下设置这些元素的样式呢?
在这种情况下,您可以做的解决方案是使用样式选择器特异性,然后将您的样式放入根styleUrls /src/styles.css (注意:不要将其放入组件样式中,您的样式将不起作用)
/* 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
希望这能有所帮助。
https://stackoverflow.com/questions/48689878
复制相似问题