如何自定義角度飛鏢中的元素

Question

我正在嘗試使用SCSS更改Angular Dart中的選項卡樣式，但是它不起作用。 我沒看錯。

飛鏢代碼包含

@Component(
    selector: 'x-product-params-screen',
    styleUrls: const ['element/tabs.css', 'element/buttons.css'],
    templateUrl: 'scr_product_config.html',
...

element / tabs.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', 300px);
@include tab-strip-color('material-tab-panel', '#ff0000', '#ff00ff');

和模板scr_product_config.html包含

<material-tab-panel *ngIf="product.parts.length > 1">
    <material-tab *ngFor="let part of product.parts" 
                  [label]="part.name"
                  [part]="part">
        <x-part-config
                [part]="part"
                (onConfigure)="onConfigure($event)">
        </x-part-config>
    </material-tab>
</material-tab-panel>

但是條帶寬度變大，制表符顏色也不會改變。

Answer 1

調試此類問題時，首先要查看的是您擁有的HTML和生成的CSS。 我在您的HTML中看不到類tab-panel ，但除此之外 ，它看起來不錯，並且與示例非常相似，並且在那里運行良好。 因此，也許您的應用程序中還有其他東西要覆蓋某些樣式？