用全局样式覆盖清晰度-ui.min.css sheet

Question

我是 angualr2 的新手，我正在尝试使用清晰度构建网页。

我试图在 style.css 文件中将主容器的高度 clr-main-container 设置为 min-height: 100vh; ~/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

您可以通过更具体地覆盖 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;
}

用全局样式覆盖清晰度-ui.min.css sheet

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

css

angular

vmware-clarity