覆盖活动选项卡中的背景颜色 Angular Material

Question

我正在尝试覆盖 Angular Material 中活动选项卡的背景颜色。我已经尝试过这篇文章，但没有成功。检查 chrome 我看到这些值：

\n\n

.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus {\n    background-color: rgba(241, 204, 206, 0.3);\n}\n

\n\n

取消选中，我得到了所需的效果，但如果我将其粘贴到样式表中，则什么也不会发生。有任何想法吗？

\n\n

编辑：完整的CSS

\n\n

.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus {\n    background-color: rgba(241, 204, 206, 0.3);\n}\n<style>\xe2\x80\xa6</style>\n.mat-tab-label:focus {\n    outline: 0;\n    opacity: 1;\n}\n<style>\xe2\x80\xa6</style>\n.mat-tab-label:focus {\n    outline: 0;\n    opacity: 1;\n}\n<style>\xe2\x80\xa6</style>\n.mat-tab-label {\n    height: 48px;\n    padding: 0 24px;\n    cursor: pointer;\n    box-sizing: border-box;\n    opacity: .6;\n    min-width: 160px;\n    text-align: center;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    white-space: nowrap;\n    position: relative;\n}\n<style>\xe2\x80\xa6</style>\n.mat-tab-label {\n    height: 48px;\n    padding: 0 24px;\n    cursor: pointer;\n    box-sizing: border-box;\n    opacity: .6;\n    min-width: 160px;\n    text-align: center;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    white-space: nowrap;\n    position: relative;\n}\n<style>\xe2\x80\xa6</style>\n.mat-tab-label, .mat-tab-link {\n    color: rgba(0, 0, 0, 0.87);\n}\n<style>\xe2\x80\xa6</style>\n.mat-ripple {\n    overflow: hidden;\n}\n<style>\xe2\x80\xa6</style>\n.mat-tab-label, .mat-tab-link {\n    font-family: Roboto, "Helvetica Neue", sans-serif;\n    font-size: 14px;\n    font-weight: 500;\n}\nuser agent stylesheet\n:focus {\n    outline: -webkit-focus-ring-color auto 5px;\n}\nuser agent stylesheet\ndiv {\n    display: block;\n}\nInherited from mat-tab-group.mat-tab-group.mat-primary.mat-background-black\n<style>\xe2\x80\xa6</style>\n.mat-tab-group {\n    font-family: Roboto, "Helvetica Neue", sans-serif;\n}\nInherited from mat-card.login-card.mat-card\n<style>\xe2\x80\xa6</style>\n.mat-card {\n    background: white;\n    color: rgba(0, 0, 0, 0.87);\n}\n<style>\xe2\x80\xa6</style>\n.mat-card {\n    font-family: Roboto, "Helvetica Neue", sans-serif;\n}\n

\n

Answer 1

试试这个 CSS，它适用于检查元素：

md-tabs .md-tab.md-active {
    background-color: #000;
    color: #fff;
}

编辑：对于 Angular 2+ 材质：

.mat-tab-label-active {
    background-color: #000;
    color: #fff;
    opacity: 1;
}