css - 如何更改 material-header-row 颜色并将 material-header-title 对齐到 App Layout 的中心？

Question

我只想使用 ::ng-deep 更改 material-header-row 的颜色，但它不起作用，并且还想对齐 material-header-title 到标题行的中心。

app_component.html

<material-content>
    <header class="material-header shadow">
        <div class="material-header-row">
            <material-button icon
                             class="material-drawer-button" (trigger)="drawer.toggle()">
                <material-icon icon="menu"></material-icon>
            </material-button>
            <span class="material-header-title">Simple Layout</span>
            <div class="material-spacer"></div>
        </div>
    </header>
</material-content>

应用组件.css

:host {
  display: block;
  overflow: hidden;
}

a:link, a:visited, a:active, a:hover {
  color: $mat-black;
  text-decoration: none;
}

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

Answer 1

::ng-deep header.material-header.material-header-row {

只会匹配

<header class="material-header material-header-row">

代替

:host ::ng-deep header.material-header .material-header-row {

应该做你想做的(增加空间)