Question

我使用角度材料2，但我认为这也适用于角度材料1。

我想说我想使用角度素材标签，但我想隐藏标签或添加一些特定的样式。

所以我有以下html / angular材料代码：

<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>

如果我将一个类添加到＆＃34;模板md-tab-label＆＃34; -tag，则不会在DOM结构中的任何位置添加它。我不能仅仅设置＆＃34; md-tab-label＆＃34; -class的样式，因为这会将样式应用于所有选项卡。如果我从父元素中对其进行范围化，则它将应用于可能存在于选项卡内容中的所有嵌套选项卡组件。如果我尝试限制深度并根据最终的DOM表示创建一个真正特定的选择器，我会在一个我无法控制的结构上应用一个样式，并且可以在任何更新时更改。

有没有正确的方法来做或者我只需要通过解构DOM结构来创建一个选择器？

Answer 1

您可以从scss / css覆盖材质样式。像这样：

/deep/ .mat-tab-group.mat-primary .mat-ink-bar{ background-color: red; }

由于视图封装，您需要使用 / deep / 选择器，以便在渲染组件时获取添加的Material类。

Answer 2

我建议避免使用 / deep /，>>>和:: ng-deep ，因为它会被贬值。（而且看起来不太干净）

作为解决方案，我将在组件级别停用视图封装。

@Component({ 
  selector: 'app-card-list', 
  templateUrl: './card-list.component.html', 
  styleUrls: ['./card-list.component.scss'], 
  encapsulation: ViewEncapsulation.None
})

在那之后，我将用角钢材质的scss创建一个周围的div。

.surrounding-div { 
  .mat-dialog { 
    display: flex; 
    flex-direction: row; 
    ...
  } 
}

这是我最喜欢的角度材料组件样式化方法。玩得开心！

如何设计特定角度材料组件的样式？

2 个答案: