使用全局样式表覆盖clarity-ui.min.css

Question

我是angualr2的新手,我正在努力建立一个清晰的网页.

我想主要的容器的高度设置clr-main-container,以min-height: 100vh;中style.css,我放置在文件~/src/style.css这是我设置全局样式.

在默认的清晰度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);

正如我所提到的,我正在尝试更改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"
      ],

但我仍然有这个问题.我错过了什么？

Answer 1

您可以通过更具体的方式或按照!important@SangeethSudheer 的建议进行添加来覆盖 CSS 规则。

使用第一个选项总是更加优雅和灵活，更具体，并且仅!important作为最后的手段使用。

更具体的 CSS 规则

/* global (less specific) */

.active { 
    height: auto;
}

/* more specific, will override the above */

div.active {
    height: 50vh;
}

header div.active {
    height: 10vh;
}