3

我正在使用角材料 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>

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

有没有正确的方法可以做到这一点，还是我只需要通过解构 DOM 结构来创建一个选择器？

4

2 回答 2

0

我建议避免使用/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; ​
    ...​
  } ​
}

这是我最喜欢的 Angular Material Components 样式的方法。玩得开心！

于 2020-02-19T08:12:45.343 回答
0

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

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

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

于 2017-11-21T13:19:56.343 回答