sass - 如何在Dart上设置Angular Material 选项卡面板(及其选项卡)的样式？

Question

我想知道如何在Dart上设置Angular Material 选项卡面板(及其选项卡)的样式。

我在使用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
    ]
)
// (...)

我想做的是:

更改标签文字颜色；

更改标签的背景颜色；

更改所选标签的背景颜色；

更改所选选项卡上的底部边框颜色。

谢谢您的帮助。

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);
}

有大多数您需要的mixins，如果缺少某些东西，请在github上发送PR。