代码之家 › 专栏 › 技术社区 › Tushar Rai

如何使用AngularDart中角度组件的应用程序布局更改标题颜色

dart-webui dart-html angular-components angular-dart dart

Tushar Rai · 技术社区 · 7 年前

如何使用AngularDart项目中角度组件的应用程序布局更改背景色。我试过了,但没有影响背景的蓝色。

layout_组件。html

<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>
    <nav class="material-navigation">
        <material-button class="material-drawer-button" icon (trigger)="">
            <material-icon icon="favorite"></material-icon>
        </material-button>
    </nav>
    <nav class="material-navigation">
        <material-button class="material-drawer-button"
                         icon
                         popupSource
                         #source="popupSource"
                         (trigger)="basicPopupVisible = !basicPopupVisible">
            <material-icon icon="more_vert"></material-icon>
        </material-button>
        <material-popup defaultPopupSizeProvider
                        enforceSpaceConstraints
                        [source]="source"
                        [(visible)]="basicPopupVisible">
            <div class="basic">
                Hello, I am a pop up!
            </div>
        </material-popup>
    </nav>
    <nav class="material-navigation">
        <div href="#AppLayout">SIGN IN</div>
    </nav>
</div>

layout_组件。css

.material-header-row {
background-color: black;
}

.basic {
    height: 200px;
    padding: 16px;
}

非常感谢。

1 回复 | 直到 7 年前

Günter Zöchbauer 7 年前

如果将样式添加到父零部件( AppComponent )您可以使用 ::ng-deep

::ng-deep header.material-header { background-color: black; }

::ng-deep .material-header-row { background-color: black; }

使现代化

::ng-deep header.material-header.material-header { background-color: black; }

如果将样式添加到 index.html , :ng深 不需要。

角度重写样式选择器添加到组件以匹配类,如 class="_ngcontent-qbq-3"

指数html 不会重写,这些类将被忽略。

:ng深 [innerHTML]="..." 或 someElement.append(...) 因为以这种方式添加的HTML不会添加类,因此在重写后,添加到组件的CSS选择器将不再匹配。