在没有::ng-deep和!important的情况下无法设置mat-tab的样式
在没有::ng-deep和!important的情况下无法设置mat-tab的样式
提问于 2018-02-09 00:08:27
我有一些使用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的情况下设置这些元素的样式呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 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
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48689878
复制相关文章
相似问题
腾讯云开发者
