override clarity-ui.min.css with global style sheet

Question

I new at angualr2 and i am trying to build a webpage using clarity.

I am trying to set the height of the main container clr-main-container to min-height: 100vh; in the style.css file that i placed in ~/src/style.css this is where I set the global styles.

in the default clarity css file the styles are set to

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

As i mentioned, I am trying to change height: 100vh; to min-height: 100vh; so in the style.css file i tried setting

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

to override the default clarity css file but this isnt working with me.

I did include the style.css in the angilar-cli.json file.

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

but i am still having this issue. What am i missing?

Answer 1

You can override CSS rules either by being more specific, or by adding !important as @SangeethSudheer suggested.

It is always more elegant and flexible to use the first option, being more specific, and only use !important as a last resort.

More specific CSS rules

/* global (less specific) */

.active { 
    height: auto;
}

/* more specific, will override the above */

div.active {
    height: 50vh;
}

header div.active {
    height: 10vh;
}