1

如何material-drawer material-icon在 angular dart 项目中将颜色更改为具有深色背景的 angular_components 的白色。

app_component.html

<material-drawer persistent #drawer="drawer"
                 [class.custom-width]="customWidth">
    <div class="mini-drawer">
        <material-list *deferredContent>
            <div class="mat-drawer-spacer"></div>
            <div>
                <material-list-item>
                    <material-icon icon="inbox"></material-icon>
                </material-list-item>
                <material-list-item>
                    <material-icon icon="star"></material-icon>
                </material-list-item>
                <material-list-item>
                    <material-icon icon="send"></material-icon>
                </material-list-item>
                <material-list-item>
                    <material-icon icon="drafts"></material-icon>
                </material-list-item>
            </div>
        </material-list>
    </div>
</material-drawer>
<div class="material-content">
    <header class="material-header shadow">
        <div class="material-header-row">
            <material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
                <material-icon icon="menu"></material-icon>
            </material-button>
            <span class="material-header-title">Mobile Layout</span>
            <div class="material-spacer"></div>
        </div>
    </header>
    <div class="app-layout">
        Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
        et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
        veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
        legere iriure blandit. Veri iisque accusamus an pri.

    </div>
</div>

app_component.scss

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

:host {

}

.custom-width {
  @include mat-drawer-width(72px);
  @include mat-temporary-drawer-width(72px);
}

.mini-drawer {
  height: 100%;
  background: $mat-blue;
}

material-list {
  background-color: transparent;
  color: $mat-white;
}
4

1 回答 1

0

您可以简单地更改 html 元素本身的颜色。示例在这里：https ://dart-lang.github.io/angular_components_example/#material_icon

来源： https ://github.com/dart-lang/angular_components_example/blob/134f9b0671ddc1142a445f182637f9e78b2a49f6/example/material_icon_example/lib/material_icon_demo.html#L37

material-icon {
  color: white;
}
于 2018-08-06T20:06:19.327 回答