कोणीय सामग्री में अपनी खुद की शैलियों ui

Question

सामग्री-ui और मैं इसे अनुकूलित करना चाहता हूं। दुर्भाग्य से मेरी खुद की शैलियों ढांचे शैलियों द्वारा अधिलेखित कर रहे हैं। उदाहरण के लिए जब मैं एमडी-टूलबार

md-toolbar { 
    background: red; 
} 

के लिए शैलियों की घोषणा करता हूं तो यह घोषणा सामग्री द्वारा अधिलेखित की जाती है। मैंने !important निर्देश जोड़ा और इससे मदद मिली लेकिन मैं इसे हर जगह उपयोग नहीं करना चाहता। मुझे उचित तरीके से सामग्री को कैसे अनुकूलित करना चाहिए?

Answer 1

आप के रूप में अपने विषय पेज पर देखा घटकों पर सीधे अलग विषय के आवेदन कर सकते हैं: https://material.angularjs.org/#/Theming/04_multiple_themes

और अगर में से कोई भी विषय में निर्मित लागू होते हैं, आप रोल कर सकते हैं अपनी खुद की: https://material.angularjs.org/#/Theming/03_configuring_a_theme

और आप की जरूरत है https://material.angularjs.org/#/Theming/01_introduction

आप शैलियों को ओवरराइड करना चाहते हैं, तोके लिए सीधे शैली लागू नहीं है: padding, या margin तरह समायोजन करने के लिए, तो scss फ़ाइल अपने आप को एक कस्टम निर्माण पाने के अद्यतनके निर्देश लेकिन तत्व यह है कि निर्देश और शैली एक बच्चे द्वारा बनाई गई है गहन जानकारी:

md-toolbar > h2 { 
    background: red; 
} 

Answer 2

बेस्ट तरीका है जिसके मुझे पता है, कम, सास recompilling बिना, आदि .:

आप कस्टम विषय लागू करना चाहिए:

angular.module('myApp').config(['$mdThemingProvider', function($mdThemingProvider) { 
    $mdThemingProvider.theme('myAwesome') 
     .primaryPalette('blue') 
     .accentPalette('cyan') 
     .warnPalette('red'); 
    $mdThemingProvider.setDefaultTheme('myAwesome'); 
}]); 

है कि तत्वों के बाद वर्ग मिलती है: md-myAwesome-theme ताकि आप अपने सीएसएस में शैली जोड़ सकते हैं (या कम) फ़ाइल:

md-select.md-myAwesome-theme { 
    margin: 0; 
    padding: 0; 
} 

Answer 3

मुझे टूलबार पारदर्शी बनाने के तरीके के बारे में एक काम मिल गया। आप अपनी टूलबार को एक div में लपेटते हैं और इसे कक्षा का नाम देते हैं। फिर अपने सीएसएस में आप अपने टूलबार को उस क्लास नाम के माध्यम से एक्सेस करते हैं जिसे आपने wraping div में रखा था। यहाँ मेरे कोड का एक स्निपेट।

यह मेरा एचटीएमएल

<section id="learn" class="navbar"> 
<md-toolbar layout="row" layout-align="space-between center"> 
    <span> 
     <h3 class="md-toolbar-tools">Something</h3> 
    </span> 

है यह मेरा सीएसएस

.navbar md-toolbar { 
background-color: transparent; 
} 

आशा इस मदद है!

Answer 4

मैं इसके साथ संघर्ष कर रहा था क्योंकि मैं एक नया नया पैलेट बनाना नहीं चाहता था और बस लेआउट के एक नए टुकड़े के लिए नकली करना चाहता था। मैंने इस तरह सीएसएस इनलाइन स्टाइल का इस्तेमाल किया और यह काम किया!

<md-toolbar style="background:indigo" layout="row" layout-align="space-between center"> 
... 
</md-toolbar> 

Answer 5

तुम भी कोणीय सामग्री विषयों निष्क्रिय कर सकते हैं:

angular.module('myApp', ['ngMaterial']) 
    .config(function($mdThemingProvider) { 
     $mdThemingProvider.disableTheming(); 
    }); 

Answer 6

अधिभावी यूआई डिजाइन इस तरह के एक दर्द हो सकता है। कोणीय सामग्री के साथ, मैंने पाया कि एक अलग सीएसएस फ़ाइल बनाने के लिए, जिसे अक्सर ओवरराइड-सामग्री-यूई कहा जाता है, और कक्षा चयनों के बजाय शैलियों को बदलने के लिए आईडी चयनकर्ताओं का उपयोग करके बहुत अच्छी तरह से काम करता है।अपने कोड के लिए इसलिए, यह होगा:

#override-toolbar { 
    background: red; 
} 

और टैग के ठीक बाद दिखाई देगा:

<md-toolbar id="override-toolbar"> 
</md-toolbar> 

जाहिर उपकरण पट्टी टैग शायद और अधिक उस में चल रहा होता, लेकिन के लिए ओवरराइड शैलियों मुझे लगता है कि यह सबसे अच्छा काम करता है। यह अच्छा है जब आपको एक ही तरीके से कई टैग स्टाइल करना पड़ता है। हालांकि इनलाइन प्रभावी ढंग से सबकुछ ओवरराइड करता है, फिर भी शैलियों को बाद में बदलने में परेशानी हो सकती है।

लेकिन, यदि कोई आईडी चयनकर्ता भी इसे काट नहीं देगा, और आप कस्टम थीम से निपटना नहीं चाहते हैं, तो इनलाइन शैली चयनकर्ता के लिए जाएं।

आशा है कि इससे मदद मिलती है!