angular2-mdl更改標題的顏色和高度

Question

我正在使用angular2-mdl（ http://mseemann.io/angular2-mdl/ ）在我的angular cli項目中進行樣式設置。 我在我的index.html中添加了默認的CSS作為

<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

我定義標題和導航的主要內容：

<div class="demo-container" mdl-shadow="2">
 <mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
  <mdl-layout-header>
   <mdl-layout-header-row>
    <mdl-layout-title>AMM</mdl-layout-title>
    <mdl-layout-spacer></mdl-layout-spacer>
    <!-- Navigation. We hide it in small screens. -->
    <nav class="mdl-navigation">

   <!-- logout -->
   <button mdl-button mdl-button mdl-button-type="icon"  (click)="logout()">
    <mdl-icon>exit_to_app</mdl-icon>
  </button>
</nav>
</mdl-layout-header-row>
</mdl-layout-header>
<mdl-layout-content>
 <!-- Your content goes here -->

 <div class="mdl-grid">

</div>
</mdl-layout-content>
</mdl-layout>
</div>

我想為標題設置自定義樣式：我想使用自定義顏色，並為其定義自己的高度。

我該如何實現？ 我必須在什么地方修改？

注意：我不想更改整個主題，我只需要修改標題即可。

Answer 1

一種方法是覆蓋高度和顏色的mdl-layout-header 。 因此，向其添加一個自定義類，並覆蓋其CSS

mdl-layout-header.custom{
  min-height: 30px; //change this value for height
  height: 30px;
  background-color: red; // change this for color
}
mdl-layout-header.custom mdl-layout-header-row{
  height: inherit;
}

導航欄代碼（html）

<mdl-layout-header class="custom">
   <mdl-layout-header-row>
      ...
      ...
      ...
   </mdl-layout-header-row>
</mdl-layout-header>

Answer 2

我確實在style.css文件中覆蓋了原始的CSS類，效果很好