角度コンポーネントのカスタマイズされたタブを適用するには？

Question

カスタマイズされたタブをの角度コンポーネントに適用しようとしていますが、結果タブは基本的なタブです。 サンプルコンポーネントのカスタマイズされたタブにCSSは適用されません。 CSSの適用方法は？

次のコードは、例のようにカスタマイズされたタブではなく、イメージに表示される結果を生成します。

app_component.html

<material-tab-panel centerStrip class="tab-panel" [activeTabIndex]="1"> 
    <material-tab label="tab1"> 
     Eager Content of Tab 1 
    </material-tab> 
    <material-tab label="tab2"> 
     <!-- named-content component simply prints its name when instantiated --> 
     <named-content name="Eager Tab (Tab 2)"> 
      Eager Tab 2 content. 
     </named-content> 
    </material-tab> 
    <material-tab label="tab3"> 
     <div *deferredContent> 
      <!-- named-content component simply prints its name when instantiated --> 
      <named-content name="Deferred Tab (Tab 3)"> 
       Lazy Tab 3 Content 
      </named-content> 
     </div> 
    </material-tab> 
</material-tab-panel> 
<h1>My First AngularDart App</h1> 

<todo-list></todo-list> 

app_component.scss

@import 'package:angular_components/css/material/material'; 
@import 'package:angular_components/material_tab/mixins'; 

@include tab-panel-accent-color('.tab-panel', $mat-red); 
@include tab-panel-tab-strip-width('material-tab-panel[centerStrip]', 400px); 

app_component.dart

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

import 'src/todo_list/todo_list_component.dart'; 

// AngularDart info: https://webdev.dartlang.org/angular 
// Components info: https://webdev.dartlang.org/components 

@Component(
    selector: 'my-app', 
    styleUrls: const ['app_component.css'], 
    templateUrl: 'app_component.html', 
    directives: const [ 
    materialDirectives, 
    DeferredContentDirective, 
    MaterialTabComponent, 
    MaterialTabPanelComponent, 
    NamedContentComponent, 
    TodoListComponent], 
    providers: const [materialProviders], 
) 
class AppComponent { 
    // Nothing here yet. All logic is in TodoListComponent. 
} 

/// Simple pass-thru content container which announces its construction and 
/// displays a label (in a <p> tag) above the content. 
/// Only use this component in demos. 
/// 
/// __Attributes__ 
/// `name: string` -- Name of component. 
@Component(
    selector: 'named-content', 
    template: r''' 
     <p>{{label}}</p> 
     <ng-content></ng-content>''', 
) 
class NamedContentComponent { 
    String get label => '$_componentName Content'; 
    final String _componentName; 
    NamedContentComponent(@Attribute('name') this._componentName) { 
    print('Named Component "$_componentName" instantiated'); 
    } 
} 

Answer 1

あなたは結果を見ることができますここに。それは私が期待するものです。アクセントの色（テキストと下線）は赤色で、タブストリップの幅は400ピクセルです。あなたは何をしようとしているのですか？