przesłonić klarowność-ui.min.css z globalnym arkuszem stylu

Question

Jestem nowy w angualr2 i staram się zbudować stronę za pomocą jasności.

Próbuję ustawić wysokość pojemnika głównego clr-main-container do min-height: 100vh; w pliku style.css które umieściłem w ~/src/style.css to gdzie mogę ustawić globalne style.

w domyślnej jasności pliku css style są ustawione na

.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); 

jak wspominałem, staram się zmienić height: 100vh; do min-height: 100vh; więc w pliku style.css Próbowałem ustawienie

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

zastąpić domyślny plik css, ale to nie działa ze mną.

Dołączyłem plik style.css do pliku angilar-cli.json.

"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" 
     ], 

ale nadal mam ten problem. Czego mi brakuje?

Answer 1

Można zastąpić reguły CSS, dodając bardziej konkretny lub dodając !important, jak zasugerował @SangeethSudheer.

Zawsze bardziej elegancka i elastyczna jest opcja pierwsza, bardziej konkretna, a do ostateczności używana jest tylko opcja !important.

Bardziej konkretne reguły CSS

/* global (less specific) */ 

.active { 
    height: auto; 
} 

/* more specific, will override the above */ 

div.active { 
    height: 50vh; 
} 

header div.active { 
    height: 10vh; 
}