angular2-mdl 更改标题颜色和高度答案

【问题标题】：angular2-mdl change header color and heightangular2-mdl 更改标题颜色和高度
【发布时间】：2018-03-08 23:16:07
【问题描述】：

我正在使用 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>

我想为我的标题自定义样式：我想使用自定义颜色并且我想为它定义我自己的高度。

我怎样才能做到这一点？我必须修改什么以及在哪里修改？

注意：我不想改变整个主题，我只需要修改我的标题。

【问题讨论】：

这个你肯定试过了，为什么不能覆盖header类的高度和颜色样式呢？
我试过了，但不确定我可以在哪里、如何以及确切地覆盖什么（哪个类）

标签： angular material-design-lite angular2-mdl

【解决方案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>

【讨论】：

【解决方案2】：

我确实覆盖了 style.css 文件中的原始 css 类，效果很好

【讨论】：