ग्लोबल स्टाइल शीट

Question

के साथ स्पष्टता-ui.min.css ओवरराइड करें I angualr2 पर नया और मैं स्पष्टता का उपयोग करके एक वेबपृष्ठ बनाने की कोशिश कर रहा हूं।

मैं इस जगह है जहाँ मैं वैश्विक शैली निर्धारित style.css फ़ाइल है कि मैं ~/src/style.css में रखा में min-height: 100vh; के मुख्य कंटेनर clr-main-container की ऊंचाई निर्धारित करने की कोशिश कर रहा हूँ।

डिफ़ॉल्ट स्पष्टता सीएसएस फ़ाइल शैलियों

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

के रूप में मैं उल्लेख करने के लिए सेट कर रहे हैं में

, मैं style.css फ़ाइल स्थापित करने की कोशिश की मैं में तो min-height: 100vh; को height: 100vh; बदलने के लिए कोशिश कर रहा हूँ

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

डिफ़ॉल्ट स्पष्टता सीएसएस फ़ाइल को ओवरराइड करने के लिए, लेकिन यह मेरे साथ काम नहीं कर रहा है।

मैंने 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 ने सुझाव दिया है।

यह अंतिम विकल्प के रूप में पहले विकल्प का उपयोग करने के लिए हमेशा अधिक सुरुचिपूर्ण और लचीला है, और अंतिम उपाय के रूप में केवल !important का उपयोग करें।

अधिक विशिष्ट सीएसएस नियम

/* global (less specific) */ 

.active { 
    height: auto; 
} 

/* more specific, will override the above */ 

div.active { 
    height: 50vh; 
} 

header div.active { 
    height: 10vh; 
}