如何在 Dart 上设置 Angular 材质选项卡面板（及其选项卡）的样式？

Question

我想知道如何在 Dart 上设置 Angular 材质选项卡面板（及其选项卡）的样式。

我在使用 SASS 时遇到问题，我认为这是这样做的方式。

目前我有类似的东西：

<material-tab-panel id="my_material_tab_panel">

    <material-tab label="First Tab" class="my-material-tabs"></material-tab>

    <material-tab label="Second Tab" class="my-material-tabs"></material-tab>

</material-tab-panel>

编辑：我正在导入 Angular 组件并将 Material Tab（组件和面板）注册为指令：

import "dart:async";
import "dart:html";

import "package:angular/angular.dart";
import "package:angular_components/angular_components.dart";

@Component(
    selector: "view-test",
    styleUrls: const ["test.css"],
    templateUrl: "test.html",
    directives: const [
        CORE_DIRECTIVES,
        materialDirectives,
        MaterialTabPanelComponent,
        MaterialTabComponent
    ]
)
// (...)

我想做的是：

1. 更改标签文本颜色；
2. 更改选项卡背景颜色；
3. 更改选定标签的背景颜色；
4. 更改所选标签的底部边框颜色。

感谢您的帮助。

Answer 1

您应该使用提供的 mixins： https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_tab/_mixins.scss

在组件的 scss 文件中，您可以执行以下操作：

@import path/material_tab/mixins;

material-tab {
  @include tab-panel-tab-strip-width('', 200px);
}

mixin 可以满足你的大部分需求，如果缺少什么，请在 github 上发送 PR。