एंगुलर मटेरियल में स्टाइलिंग मैट-सेलेक्ट

मैट-सेलेक्ट की उपस्थिति को अनुकूलित करते समय, आपको इसके पैनल घटक को स्टाइल करने में चुनौतियों का सामना करना पड़ सकता है। कस्टम शैलियों को निर्दिष्ट करने के लिए पैनलक्लास प्रॉपर्टी का उपयोग करने के अनुशंसित दृष्टिकोण का पालन करने के बावजूद, शैलियाँ लागू होने में विफल रहती हैं, जिससे आप भ्रमित हो जाते हैं।

शैलियाँ काम क्यों नहीं करतीं

कोणीय सामग्री मैट-सेलेक्ट का उपयोग करती है -चयनित सूची सामग्री के लिए वर्ग नाम के रूप में सामग्री। इस घटक को स्टाइल करने के लिए, कई विधियाँ उपलब्ध हैं:

1. ::एनजी-डीप

का उपयोग करते हुए चाइल्ड घटकों के माध्यम से शैलियों को बाध्य करने के लिए ::एनजी-डीप शैडो-पियर्सिंग डिसेंडेंट कॉम्बिनेटर को नियोजित करें।

::ng-deep .mat-select-content {
  width: 2000px;
  background-color: red;
  font-size: 10px;
}

2. ViewEncapsulation का उपयोग करना

घटक के दृश्य एनकैप्सुलेशन को कोई नहीं पर कॉन्फ़िगर करें, जिससे शैलियाँ घटक के अलगाव से बच सकें।

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

3. style.css में क्लास स्टाइल सेट करना

कस्टम शैलियों को परिभाषित करने के लिए style.css फ़ाइल का उपयोग करें, उन्हें किसी भी मौजूदा शैलियों को ओवरराइड करने के लिए !important के साथ लागू करें।

.mat-select-content {
  width: 2000px !important;
  background-color: red !important;
  font-size: 10px !important;
}

4. इनलाइन शैली का उपयोग करना

इनलाइन शैलियों को सीधे मैट-ऑप्शन तत्वों पर लागू करें, किसी भी विरासत में मिली शैली को ओवरराइड करते हुए।