angular-material - 如何为特定的角度 Material 组件设置样式？

Question

我使用的是角 Material 2，但我认为这也适用于角 Material 1。

假设我想使用角度 Material 选项卡，但我想隐藏选项卡或向其添加一些特定样式。

所以我有以下 html/angular Material 代码:

<md-tab-group>
    <md-tab>
        <template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0"
            Some tab
        </template>
        <template md-tab-content>
            Some content. Perhaps other tab components.
        </template>
    </md-tab>
    <md-tab>
        <template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0"
            Some tab
        </template>
        <template md-tab-content>
            Some content. Perhaps other tab components.
        </template>
    </md-tab>
</md-tab-group>

如果我将一个类添加到“模板 md-tab-label”标签，它不会添加到 DOM 结构中的任何位置。我不能只设置“md-tab-label”类的样式，因为那样会将样式应用于所有选项卡。如果我从父元素确定它的范围，它将应用于所有嵌套的选项卡组件，这些组件可能出现在选项卡内容中。如果我尝试限制深度并根据最终的 DOM 表示创建一个真正非常具体的选择器，我将在我无法控制的结构上应用一种样式，并且它可能会在任何更新时发生变化。

是否有正确的方法来执行此操作，还是我只需要通过解构 DOM 结构来创建选择器？

Answer 1

您可以从您的 scss/css 覆盖 Material 样式。像这样:

/deep/.mat-tab-group.mat-primary .mat-ink-bar{
背景色:红色；
}

由于 View 封装，您需要使用 /deep/ 选择器，这样您就可以在渲染组件时获取添加的 Material 类。