mdl-layout-header mdl-layout-header-rowの高さを変更

Question

このMaterial Design Liteヘッダーの高さを変更するCSSを設定する方法。私は、MDL-レイアウトヘッダー行の高さの変化を見ることができますが、MDL-layout__headerの高さが変化し得ることができない

<!-- 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; 
} 

！

Answer 1

また、min-heightプロパティを上書きする必要があります（!importantを使用する必要はありません）。

Pen demo