如何使用 AngularDart 中 angular 组件的 App 布局更改 header 颜色

Question

如何更改 AngularDart 项目中 angular 组件的应用程序布局的背景颜色。我试过了，但没有任何影响背景蓝色。

layout_component.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_component.css

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

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

谢谢

Answer 1

如果将样式添加到父组件（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-deep。

Angular 重写添加到组件的样式选择器以匹配类就像 class="_ngcontent-qbq-3" 它添加到每个组件（每个组件都有不同的编号）以强制样式封装。

添加到 index.html 的样式不会被重写，这些类会被忽略。

对于使用 [innerHTML]="..." 或 someElement.append(...) 添加的 HTML，您可能还需要 ::ng-deep，因为以这种方式添加的 HTML 无法获得类添加和添加到组件的 CSS 选择器因此在重写后将不再匹配。

如何使用 AngularDart 中 angular 组件的 App 布局更改 header 颜色

How to change the header color with App layout of angular components in AngularDart

dart

dart-webui

dart-html

angular-dart

angular-components