覆蓋全局樣式表清晰度ui.min.css

我在angualr2新，我想建立一個清晰的網頁。覆蓋全局樣式表清晰度ui.min.css

我想設置主容器clr-main-container的高度爲min-height: 100vh;style.css文件，我放在~/src/style.css這是我設置全局樣式的地方。

的樣式設置爲

.main-container { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    height: 100vh; 
    background: #fafafa; 
    overflow: hidden; 
    -webkit-transform: translateZ(0);

正如我所提到的默認清晰度css文件

，我試圖改變height: 100vh;到min-height: 100vh;所以在style.css文件我試着設置

.main-container { 
    min-height: 100vh !important; 
}

覆蓋默認的清晰度CSS文件，但這不是與我合作。

我沒有在angilar-cli.json文件中包含style.css。

"styles": [ 
     "styles.css", 
     "../node_modules/clarity-icons/clarity-icons.min.css", 
     "../node_modules/clarity-ui/clarity-ui.min.css", 
     "../node_modules/handsontable/dist/handsontable.full.css", 
     "../node_modules/nouislider/distribute/nouislider.min.css", 
     "../node_modules/intro.js/introjs.css" 
     ],

但我仍然有這個問題。我錯過了什麼？

來源

2017-08-20 Yaseen

集'高度：汽車important'爲好。你是否也可以嘗試將'styles.css''條目移動到'styles'數組中的最後一個位置？ –

@SangeethSudheer在'styles.css'文件中設置'height：auto！important'解決了我想要做的事謝謝你:)。它禁用默認高度。我確實改變了'styles'的位置，但它沒有起作用，所以我保持不變。無論如何它現在工作。 – Yaseen

您可以通過更具體的方式覆蓋CSS規則，或者按照建議的@SangeethSudheer添加!important。

使用第一個選項時更加優雅和靈活，更具體，只使用!important作爲最後的手段。

更具體的CSS規則

/* global (less specific) */ 

.active { 
    height: auto; 
} 

/* more specific, will override the above */ 

div.active { 
    height: 50vh; 
} 

header div.active { 
    height: 10vh; 
}

來源

2017-11-21 13:27:55

覆蓋全局樣式表清晰度ui.min.css

回答

相關問題