css - 更改 mdl-layout-header 的高度 mdl-layout-header-row

Question

如何设置 CSS 以更改此 Material Design Lite 标题的高度。

  <!-- MDL-LAYOUT - HEADER -->
  <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">

      </div>
  </header>

.mdl-layout__header{
    margin: 0;
    padding: 0;
    background: transparent;
    border-top: 1px solid gold;
    border-bottom: 1px solid gold;
    color: gold;
    height: 16px !important;
}
.mdl-layout__header-row{
    margin: 0;
    padding: 0;
    background: transparent;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    color: gold;
    height: 16px !important;
}

我可以看到 mdl-layout-header-row 高度发生变化，但无法更改 mdl-layout__header 高度!

Answer 1

您还必须覆盖 min-height 属性(无需使用 !important)。

Pen demo