Override clarity-ui.min.css with global stylesheet

Question

I am new to angualr2 and I am trying to create a web page with 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 posted in ~/src/style.css where I set the global styles.

in the CSS file with clarity, the default 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'm trying to change height: 100vh; at min-height: 100vh; , so in the style.css file I tried to install

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

to override the CSS file with default clarity, but this does not work with me.

I included the style.css file 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 still have this problem. What am I missing?

Answer 1

You can override the CSS rules either more specifically or by adding !important as suggested by @SangeethSudheer.

It is always more elegant and flexible to use the first option, more specifically, and use !important only 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; }