Material-ui: [कोर] एक अधिक परिष्कृत स्टाइल समाधान होना चाहिए।

को निर्मित 22 अप्रैल 2016  ·  100टिप्पणियाँ  ·  स्रोत: mui-org/material-ui

@ कैलमॉल / मैटेरियल-यूई कृपया कुछ इनपुट छोड़ दें जब आप material कर सकते हैं

हमें 0.16.0 लिए एक स्टाइल समाधान पर निर्णय लेने की आवश्यकता है जो लंबे समय तक खड़े मुद्दों को संबोधित करने में मदद करेगा। प्रदर्शन के मुद्दों के बाहर, इस तथ्य के लिए बनाने के लिए सभी जगह हैक और प्रॉप्स हैं कि हम सीएसएस में कुछ शक्तिशाली विशेषताओं को याद कर रहे हैं जो इनलाइन शैलियों के साथ उपयोग नहीं किया जा सकता है - छद्म कक्षाएं, मीडिया क्वेरी (बिना मिलान के) ), आदि।

मैं जो समझता हूं, उससे आम सहमति यह है कि हम एक जेएस शैली समाधान चाहते हैं जिसमें डोम में वास्तविक स्टाइलशीट के लिए शैलियों को लिखने की क्षमता है।

यहाँ कुछ बनाए गए समाधान हैं जो यह करते हैं:
https://github.com/rofrischmann/react-look
https://github.com/Khan/aphrodite
https://github.com/jsstyles/react-jss

नए समाधान (IMO) को लागू करते समय हमें कुछ बिंदुओं पर विचार करने की आवश्यकता है:

  1. क्या यह हमारे लक्ष्यों के साथ संरेखित है? (हल्के से ऊपर से छुआ)
  2. मीडिया के प्रश्नों को लागू करना जो उच्च स्तर के ब्रेकपॉइंट का पालन करते हैं कल्पना में विस्तृत रूप से एक स्टाइलशीट मिश्रण के साथ घटकों में उपयोग किया जा सकता है (या जो भी कार्यान्वयन हम उन्हें कॉल का उपयोग करते हैं)। यदि हम शैली कार्यान्वयन को ओवरहॉल कर रहे हैं, तो इस पुस्तकालय में बेहतर प्रतिक्रियाशील UI समर्थन के लिए बीज बोने का यह उपयुक्त अवसर है। यह और भी बेहतर होगा अगर ये उपकरण यूजरलैंड में भी उपलब्ध हों if
  3. क्या हमें लेबर के फ्लेक्सबॉक्स लेआउट कार्यान्वयन को एकीकृत करने में मदद करने के लिए लेआउट हेल्पर घटकों और / या मिक्सिन्स का निर्माण करना चाहिए?
  4. क्या नए समाधान के सर्वोत्तम उपयोग को अधिकतम करने के लिए थीमिंग की आवश्यकता है? जबकि थीमिंग लगातार स्टाइलिंग का एक घटक है, हमें कई सामान्य सामग्री शैलियों जैसे वैश्विक कीलाइन / फ़ॉन्ट आकार / रिक्ति / मार्जिन / आदि के लिए चर बनाने पर भी ध्यान देना चाहिए। मैं दृढ़ता से सलाह देता हूं कि हम सामग्री-यूआई टाइपोग्राफी गाइड से मेल खाते हुए पूर्वनिर्धारित प्रकार की शैलियों का निर्माण करके अपनी टाइपोग्राफी की स्थिरता में सुधार करें, और इन वैश्विक प्रकार के स्टाइल वेरिएबल्स को डिफ़ॉल्ट रूप में यथासंभव सर्वोत्तम तरीके से घटक तत्वों का मिलान करने का प्रयास करें।
  5. यदि लाइब्रेरी का उपयोग react-look जितना बड़ा है, तो कोशिश करें और देखें कि हम न्यूनतम बिल्ड आकार के लिए मॉड्यूल कैसे आयात कर सकते हैं। यह बहुत अच्छा होगा यदि हम बिल्ड आकार पर प्रभाव को कम कर सकते हैं। मैंने महसूस किया कि 9kb उस https://github.com/rofrischmann/inline-style-prefixer है जिसे हम पहले से ही ... of
discussion performance umbrella

सबसे उपयोगी टिप्पणी

क्या स्टाइल समाधान को अंतिम रूप दिया गया है?

सभी 100 टिप्पणियाँ

कुछ और सवाल:
6) क्या हम xxxxStyle प्रॉप्स को निकालने या हटाने का लक्ष्य रखेंगे और उपयोगकर्ताओं को ओवरराइडिंग शैलियों के लिए xxxClassName करना होगा? या ये तारीफ होगी?
7) क्या हम CSS के माध्यम से शैलियों को ओवरराइड करने देंगे और हमारे घटकों के इंटरफेस को सरल करेंगे। तो अगर मैं IconMenu में menuItemStyle ओवरराइड करना चाहता हूं, तो क्या मैं style = StyleSheet.create({ IconMenu: {MenuItem: { color:red }}) प्रकार ओवरराइड बनाऊं?

@chrismcv मेरी व्यक्तिगत राय है कि हमें निश्चित रूप से इन सुपर विशिष्ट प्रॉप्स को हटाने के लिए समाधान का लाभ उठाने की आवश्यकता है जो हम प्रस्तावित देख रहे हैं: [TextField] चल

इससे पहले कि हम यह जानते हैं, लोग हर संभव फ़ोकस / सक्रिय / होवर / जो भी राज्य के लिए उपसमुच्चय शैलियों के लिए सहारा मांगने जा रहे हैं।

मैं बहुत सारे मुद्दों को देखता हूं जो "कैसे XXX को स्टाइल करना है", "YYYY के अंदर XXX को स्टाइल नहीं कर सकते हैं", " somethingInsideToTheLeftButSlightlyMiddleFocusHoverActiveStyle को XXX कृपया जोड़ें"

@chrismcv 6. 6. अधिक सामान्य xxxxStyle प्रॉप्स बनाम क्लासनेम के संबंध में, आपको क्या लगता है? हमारे कुछ घटकों के साथ आप एक या दूसरे तरीके से पहुंचने में सक्षम होने जा रहे हैं (सौभाग्य से हम :hover आदि का उपयोग करने में सक्षम होंगे!)।

@chrismcv मुझे लगता है कि xxxxStyle प्रॉप्स style प्रॉपर्टी में जाने चाहिए, न कि className -एफ़ाइन्ड स्टाइल ऑब्जेक्ट में।

@nathanmark वार्तालाप को बूटस्ट्रैप करने के लिए धन्यवाद। यह निश्चित रूप से प्रमुख मुद्दों में से एक है जिसे हमें अगली रिलीज के लिए संबोधित करना है major।

प्रदर्शन के मुद्दों के बाहर

मेरे लिए, यह एक मुख्य चिंता है जिसका समाधान हम चुन लेंगे।
हमारे पास कई मानक नहीं हैं, हम कल्पना कर सकते हैं कि हमने अपने वर्तमान दृष्टिकोण के साथ कई सीपीयू चक्र खो दिए। सीपीयू चक्र हमारी इनलाइन शैली वस्तु के लिए स्मृति आवंटन और कचरा संग्रह में खो जाते हैं।

@oliviertassinari

मैं इस समय JS स्टाइल समाधानों के एक जोड़े के साथ खेल रहा हूं। यह दिलचस्प है लेकिन स्पष्ट है कि अभी भी "शुरुआती दिन" हैं इसलिए बोलना है।

एक बात जो मैं सोच रहा था - गतिशील शैली गुणों के बाहर (उदाहरण के लिए, यदि घटक में color प्रोप है), तो क्या हमें आधार शैली वस्तु बनाने के तरीके को बदलना चाहिए?

ऐसा लगता है जैसे जेएस शैली के कामों के साथ, अधिकतम प्रदर्शन प्राप्त करने के लिए आपको उनके StyleSheet.create() पद्धति का एक बार उपयोग करना चाहिए और कुंजी (सीएसएस "कक्षाएं") को उस वस्तु में सहारा / राज्यों के लिए जैसे open={true} सशर्त गुणों के एक जोड़े के साथ शैली वस्तु शाब्दिक रूप से गतिशील रूप से निर्माण करने और हर एक शैली के लिए इसे प्रस्तुत करने के लिए स्टाइलशीट फैक्ट्री विधि को पारित करने के बजाय।

भले ही स्टाइलशीट सेलेक्टर्स इस अर्थ में कैश्ड हो जाते हैं कि वे केवल एक बार ही DOM में लिखे गए हैं (और केवल render() लिए आवश्यक होने पर DOM के लिए लिखे गए कुछ परिवादों में), हम अभी भी कुछ गणनाओं के साथ संसाधनों को बर्बाद कर रहे हैं। + ऑब्जेक्ट निर्माण + कचरा संग्रह जैसा कि आपने ऊपर बताया कि यदि हम एक नई शैली की वस्तु बना रहे हैं, तो हर एक बस उसे फेंक दिया जाता है।

हम्मम ... मैंने कल (रविवार) यहां एक टिप्पणी छोड़ दी। क्या यह नष्ट हो गया?

@rvbyron मुझे यह स्पष्ट रूप से याद है। मैं निश्चित रूप से हालांकि इसे हटा नहीं था।

@rvbyron मुझे भी याद है। मुझे कुछ नहीं पता किक्या हुआ?

@rvbyron - मेरे ईमेल में था, इसलिए यहाँ उद्धृत रूप में!

खैर, मैं एक के लिए कई चीजें देखना चाहूंगा।

ए) हां, हर तरह से पुस्तकालय स्तर पर तत्व की शैली पैरामीटर का उपयोग करने से छुटकारा पाएं। सभी घटकों को क्लासनेम का उपयोग करके परिभाषित किया जाना चाहिए। घटकों का उपयोग करने से शैली सीएसएस ऑफ़र के सभी पावर को नष्ट कर देती है।
बी) यह बहुत अच्छा होगा कि प्रत्येक घटक के मूल तत्व के साथ क्लासनेम स्वचालित रूप से जुड़ा हुआ हो (जैसे कि RaisedButton घटक का मूल रूप से className = "mui-उठाया-बटन" घटक के मूल तत्व पर होगा)। यह स्टाइलिंग को बहुत आसान बना देगा। वह भी विन्यास योग्य हो सकता है।
सी) पूरी तरह से muiTheme.js फ़ाइलों से बाहर थीम प्राप्त करें। एक थीमिंग muiTheme.SCSS फ़ाइल इस मामले में बहुत बेहतर होगी कि यह थीम निर्माता द्वारा चुनी गई किसी भी संपत्ति को लागू करने की अनुमति देगा और न कि केवल विशेष रूप से घटक द्वारा अनुमत है। बेशक इसके लिए शायद बी को लागू करने और सक्रिय होने की आवश्यकता होगी।
डी) रिएक्ट-लुक एक अच्छा समझौता प्रतीत होता है क्योंकि यह JSON ऑब्जेक्ट्स को स्टाइल प्रॉपर्टीज में परिवर्तित करता है। यह चीजों को ओवरराइड करना आसान बनाता है। हालाँकि, जैसा कि मैंने ऊपर C में कहा है, मैं अभी भी SCSS में थीम बेस बनाना चाहूंगा। मैं बहुत खुला हूं जिस पर CSS सहायता पैकेज का उपयोग करता है। लेकिन मैं उस चीज़ से दूर रहूँगा जो क्लासनेम पैरामीटर पर तत्व की शैली पैरामीटर का उपयोग करना चाहती थी।

@chrismcv धन्यवाद दोस्त!

मुझे लगता है कि @rvbyron को जो कहना है वह महत्वपूर्ण है क्योंकि कुछ मायनों में, JS स्टाइलिंग नियमित सीएसएस से बहुत अधिक बदलाव है। अधिकांश लोग अपने दिन के काम में जेएस स्टाइलिंग का उपयोग नहीं कर रहे हैं और इसके लिए एक अलग तरीके की सोच की आवश्यकता है + यह उन डिजाइनरों के लिए कठिन बनाता है जो आमतौर पर उन परियोजनाओं में योगदान कर सकते हैं जो जेएस में इतने कुशल नहीं हैं।

यहां सभी कोणों पर विचार करना महत्वपूर्ण है।

@oliviertassinari @chrismcv

एक बात जो मुझे react-look बारे में महसूस हुई, वह यह है कि आपको अपने सभी घटकों को look HC में लपेटने की आवश्यकता है । यह बहुत आक्रामक लगता है, यह render() फंक्शन को हाईजैक भी करता है, super.render() को const स्टोर करता है और इस तरह से स्टाइल रिज़ॉल्यूशन ऑपरेशन करता है। खान / कामोत्तेजक जैसे कुछ अन्य समाधानों के लिए styles.xxxx Stylesheet.create() className={} अंदर Stylesheet.create() लगभग एक फ़ंक्शन आवरण की आवश्यकता होती है।

सीएसएस के लिए render() फ़ंक्शन का अपहरण करना मुझे अधिक इंजीनियर लगता है। यह मुझे बताता है कि इस प्रकार की गहन एकीकृत शैलियों की कार्यक्षमता के लिए टूलींग / समर्थन में निर्मित रिएक्ट बस नहीं है, मुझे यकीन है कि हमारे सभी घटकों के लिए रेंडर को नियंत्रित करने वाले सीएसएस हेल्पर एचओसी के विचार के बारे में नहीं है।

विचार?

हाय सामग्री-यूआई टीम!

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

  • कुछ शैलियों घटक चूक से आते हैं (जो नोड फ़ोल्डर में सेट किए जाते हैं और स्पर्श करने योग्य नहीं होते हैं)
  • कुछ घटक मापदंडों से आते हैं (उदाहरण के लिए अवतार घटक पैरामीटर size={40} सेट की चौड़ाई, ऊंचाई और लाइन-ऊँचाई से 40px )
  • जब घटक डिफॉल्ट को अनुकूलित किया जाता है (थीम रंग) तो शैली थीम अनुकूलन स्थान से आती हैं
  • जब बाकी घटक शैलियों को संशोधित किया जाता है तो शैलियों को एक घटक कार्यान्वयन से आता है, जो कोड में एक और हिस्सा है

जब शैलियों को समायोजित करने की बात आती है तो देखने के लिए कम से कम 4 अलग-अलग स्थान (the) हैं, जिससे मुद्दों की जांच करना मुश्किल हो जाता है।

जब शैलियाँ css के साथ आती हैं, तो आप चयनकर्ता को देखेंगे और ठीक से जान पाएंगे कि कहाँ ठीक करना है। इनलाइन-शैलियों के साथ यह समझने में समय लगता है कि विशेष संपत्ति कहां से आती है, और कहां और क्या संशोधित किया जाना चाहिए। और अगर डेवलपर इसे गलत स्थान पर संशोधित करता है (चलो size पैरामीटर के बजाय styles क्षेत्र में कहें, क्योंकि वास्तव में कुछ भी नहीं बताता है कि size शैली है) यह प्रभावित करेगा पूरे width=height=line-height=40px ब्लॉक प्रदर्शन, या फिर से width/height/line-height लिखने का नेतृत्व करेंगे जो size पैरामीटर को अनुपयुक्त बना देगा।

इसके अलावा, यह भी जांचना कठिन हो जाता है कि कौन से मूल तत्वों में विशिष्ट गुण लागू हैं, क्योंकि आप निरीक्षक में सभी देख सकते हैं element.style
image

जब शैली चयनकर्ताओं (वर्ग नामों) के साथ आती है तो यह इनलाइन-शैलियों की तुलना में शैली संरचना पर अधिक नियंत्रण देती है।

अपडेट: सुझाव का उल्लेख करना न भूलें (जो इस विषय के बारे में है):

/component
--component.js
--component.css (or sass that is converted to css when the page is rendering)

यह संरचना घटक को दायरे में रखेगी, लेकिन स्टाइल पर अधिक नियंत्रण देगी। और एक बीईएम वर्गनाम सम्मेलन अनावश्यक घोंसले के शिकार से बचने में मदद करेगा:

.mui-component {}
.mui-component__child {}

सामग्री-यूआई शैलियों को लागू करने, समायोजित करने और बनाए रखने में कौन सी समग्र मदद करेगा।

@chrismcv

ईमेल को खोजने और टिप्पणी में रखने के लिए धन्यवाद!

दोनों दुनिया व्यवहार दृष्टिकोण के सर्वश्रेष्ठ?

स्टाइल तकनीक के आयात की "व्यवहार" अवधारणा के बारे में क्या जो आपकी आवश्यकताओं के लिए सबसे उपयुक्त है। "StyleTheme" या "ClassTheme" का एक आयात व्यवहार का चयन करने के लिए इस्तेमाल किया जा सकता है। StyleTheme आज muiTheme ऑब्जेक्ट सामग्री-यूआई का उल्लेख कर सकता है और घटक केंद्रित स्टाइल डेवलपर्स को खुश कर सकता है। या, ClassTheme जो SCSS फ़ाइल का उपयोग करेगा जो कि muiTheme.js ऑब्जेक्ट (synced) से बनाया गया है जो CSS सेंट्रिक डेवलपर्स को खुश करता है। इसका मतलब यह होगा कि सभी घटकों को रेंडर तत्वों में {... theme.ComponentName} को समायोजित करने की आवश्यकता होगी।

एक बहुत ही सरल उदाहरण प्रस्तुत करने के लिए, राउंडबटन घटक के पास रेंडर विधि होगी जैसे:

render() {
    return (<button {...theme.RoundButton} />);
}

StyleTheme व्यवहार के लिए, विषय। RoundButton में शामिल होंगे:

{ 
    style: {
        display: 'inline-block';
        borderRadius: '20px';
        width: '40px';
        height: '40px';
    }
}

ClassTheme व्यवहार के लिए, विषय। RoundButton में शामिल होंगे:

{ 
    className: 'mui-round-button'
}

दोनों के संयोजन को ClassStyleTheme व्यवहार के रूप में पुनः प्राप्त किया जा सकता है, विषय .oundButton में दोनों शामिल होंगे:

{ 
    className: 'mui-round-button',
    style: {
        display: 'inline-block';
        borderRadius: '20px';
        width: '40px';
        height: '40px';
    }
}

Mui-theme.scss फ़ाइल muiTheme.js फ़ाइल से जनरेट की जाएगी और SCSS में परिलक्षित होती है जिसमें JS फ़ाइल सम्‍मिलित है। जेएस नामों के ऊंट आवरण को अधिक मानक वर्ग नामों में परिवर्तित किया जाएगा:

mui-round-button {
    display: inline-block;
    border-radius: 20px;
    width: 40px;
    height: 40px;
}

MUI घटकों के लिए किसी भी सीएसएस अनुकूलन बस mui-theme.scss फ़ाइल लोड होने के बाद समान कक्षाएं भरी होंगी, जिससे मुई-थीम गुणों को ओवरराइड किया जा सकेगा।

@oliviertassinari

मुझे लगता है कि scss (नामस्थान / हैशिंग के लिए + सीएसएस मॉड्यूल) का उपयोग करने से बहुत सारे लाभ हैं। क्या यह कुछ ऐसा है जिसका आप 100% विरोध कर रहे हैं? मैं शायद थोड़ा पक्षपाती हूं क्योंकि यह वही है जो मैं काम में इस्तेमाल करने का आदी हूं, लेकिन बहुत सारे लोग एक ही नाव में हैं।

जेएस स्टाइलिंग की स्थिति के साथ मेरी मुख्य समस्या यह है कि ऐसा लगता है कि सभी समाधान अभी भी प्रगति पर हैं। देखने के लिए बहुत सारे वास्तविक विश्व प्रदर्शन मूल्यांकन नहीं हैं, हम जिन कार्यों को देख रहे हैं, वे अप्रमाणित हैं और मुझे लगता है जैसे हम अपना बहुत सारा समय जेएस की शैलियों को ठीक से करने की कोशिश में बिता रहे हैं। इस दायित्व का मुख्य लक्ष्य सामग्री डिजाइन कल्पना को लागू करना है और मैं मदद नहीं कर सकता, लेकिन यह महसूस करता हूं कि यह इस समय हमारी बाधा है। (हम पूर्ण प्रभाव के मुद्दों को हल करने की जरूरत है)

मुझे लगता है कि इस बारे में हमारी अलग-अलग चिंताएँ हैं।

  1. स्थिर शैलियों को कहाँ रखा जाए (आसान, एक सीएसएस फ़ाइल कर सकते हैं)
  2. इनपुट के आधार पर कुछ शैलियों को कैसे स्विच करें (क्लासनेम स्विच)
  3. गतिशील शैली कैसे लागू करें (इनलाइन शैलियाँ ऐसा कर सकती हैं)

जब आप कोई एप्लिकेशन लिख रहे हों तो सब अच्छा लगता है, आपके कोड के बाहर किसी को भी कुछ भी बदलने की आवश्यकता नहीं है।

लेकिन पुस्तकालयों के साथ चीजें अलग हैं, उपरोक्त सभी चिंताएं हैं, साथ ही निम्नलिखित हैं:

  1. उपयोगकर्ताओं को स्थिर शैलियों को अनुकूलित करने के लिए कैसे सक्षम करें?
  2. थीम को इस तरह से कैसे लागू किया जाए कि उसे स्विच करना, कस्टमाइज़ करना और अलग करना (अलग-अलग सबट्री अलग थीम) आसान हो?
  3. वैश्विक नाम स्थान को प्रदूषित करने से कैसे बचें ताकि हम दूसरों के साथ अच्छा खेल सकें?
  4. उपयोगकर्ता इनलाइन गतिशील शैलियों को कैसे ओवरराइड कर सकते हैं?
  5. ट्रांसफार्मर! (आरटीएल, उपसर्गकर्ता, आदि)

हमारे पास अभी जो कुछ भी है, वह इन चिंताओं के साथ उन सभी चिंताओं को संभालता है:

  1. प्रदर्शन!
  2. गहरी नेस्टेड घटकों को अनुकूलित करना कठिन है, जैसा कि @nathanmark ने कहा: somethingInsideToTheLeftButSlightlyMiddleFocusHoverActiveStyle
  3. हम कुछ सीएसएस सुविधाओं की शक्ति का उपयोग नहीं कर सकते हैं।

यदि हम अपना स्टाइल अप्रोच बदलते हैं तो हमें यह सब फिर से करना होगा। यदि यह आता है कि हमें प्रवास शुरू करने से पहले उन सभी का जवाब देना सुनिश्चित करना चाहिए।

मेरी विनम्र राय में, मुझे लगता है कि सीएसएस और कभी भी इसका संकलन करने वाले भविष्य के हिस्से नहीं हैं। मुझे लगता है कि हम सभी सहमत हैं कि इनलाइन-शैलियों ने हमारे जीवन को बहुत आसान बना दिया है। ईमानदारी से, मैं केवल इनलाइन-शैलियों के साथ देख रहा हूँ :hover !

हम उन मुद्दों को थोड़ा डिजाइन करने के साथ हल कर सकते हैं।

  1. शैलियों की वस्तु को याद करें, ऐसे घटक जिनके लिए राज्य है, हम राज्य को तोड़ सकते हैं और इसे एक छोटे घटक में रख सकते हैं ताकि इसमें मौजूद शैली वस्तु को पारित प्रॉप्स के आधार पर याद किया जा सके जो उच्च घटक की स्थिति है। यह आसानी से हल करने योग्य है!
  2. उन्हें तोड़ दो! क्यों हमारे पास बहुत सी ListItem L somethingInsideToTheLeftButSlightlyMiddleFocusHoverActiveStyle जैसे मठों को जोड़ना नहीं है
  3. हुंह! हम सभी को :hover साथ प्रदर्शन मिलता है मुझे लगता है कि हम उस तक रह सकते हैं जब तक कि ब्राउज़र या प्रतिक्रिया इसके बारे में कुछ नहीं करती है।

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

इसलिए हमारे दृष्टिकोण को बदलने और इन सभी मुद्दों को फिर से हल करने के बजाय, हमारे पास पहले से मौजूद सुधार के समय का निवेश करें। हमें मीडिया के प्रश्नों का समर्थन करने की आवश्यकता नहीं है, हम अपने घटकों को इस तरह से बदल सकते हैं कि दूसरों के लिए उन पर जवाबदेही को लागू करना आसान हो। डिबग करना मुश्किल है? यदि हम अपने घटकों को तोड़ते हैं तो इनबिल्ड स्टाइल्स छोटे और पढ़ने में आसान होंगे। हालांकि बहस! मेरा मतलब है कि आपको यह देखने के लिए एक ब्रेक पॉइंट है कि Object.assign में भाग लेने के लिए यह देखने के लिए कि शैली कहाँ से आ रही है।

यह निश्चित रूप से मेरी अपनी राय है मैं चर्चा के लिए बहुत खुला हूं।

@alitaheri

आप कुछ बेहतरीन बिंदु उठाते हैं। धन्यवाद। मैं सोच रहा था कि किसी प्रकार का हाइब्रिड समाधान एक संभावना है। लगता है कि कोई फर्क नहीं पड़ता कि हम किस कोण पर ले जाते हैं मुद्दों का एक गुच्छा है what

मेरे पास अगले सप्ताह इस पर काम करने का समय है - चलो एक चैट करें और देखें कि क्या हम एक चतुर विचार के साथ आ सकते हैं।

मैं परिवर्तन की मात्रा को कम करने और पहले से ही हल किए गए मुद्दों को फिर से हल करने की कोशिश से सहमत हूं। मेरे मन में यहाँ 2 महत्वपूर्ण लक्ष्य हैं:

  1. प्रदर्शन
  2. डेवलपर का अनुभव (जेएस शैली की लिबास यहाँ डेवलपर्स को अपने अनुप्रयोगों में आसानी से उपयोग करने के लिए सक्षम करके बहुत मदद करती है)

इस बारे में और अधिक सोचने की आवश्यकता है more लेकिन जब तक हम उन 2 बिंदुओं को हल करने का प्रबंधन करते हैं मैं अपने समाधान से खुश रहूंगा।

एक और यादृच्छिक नोट - यह बहुत अच्छा होगा अगर हमारे पास इनलाइन / jsstyle के लिए कुछ कोड कन्वेंशन और डिजाइन पैटर्न लागू करने के लिए एक स्वचालित तरीका है / जो भी लिबास में हों।

क्या यह कुछ ऐसा है जिसका आप 100% विरोध कर रहे हैं?

@ न्हांसमार्क मैं मृत-अंत है
प्रतिक्रिया के मुख्य लाभों में से एक ब्राउज़र की प्रतिपादन विशिष्टता को दूर करना है: DOM।
जहां तक ​​मुझे पता है, रिएक्ट कोर टीम का दीर्घकालिक लक्ष्य क्रॉस-प्लेटफॉर्म घटक लिखने के लिए एक एपीआई प्रदान करना है। दरअसल, वे वर्तमान में इस दिशा में

मैं @alitaheri से पूरी तरह सहमत हूं। हम उन दो चरणों से शुरू कर सकते हैं:

  • हर जगह getStyles पैटर्न का उपयोग करें ताकि हम बाद में आसानी से प्रवास कर सकें।
    क्या हम एक कोडेम का उपयोग कर पाएंगे? कौन जाने।
  • @Alitaheri द्वारा प्रस्तावित प्रत्येक घटक को तोड़ना।

@oliviertassinari मैं मृत-अंत निष्कर्ष से सहमत हूं - यह भविष्य नहीं है। मैंने इसे बड़े पैमाने पर बातचीत को प्रोत्साहित करने के लिए लाया कि जेएस शैलियों को हमारे लिए कैसे काम किया जाए। मुझे पता था कि यहाँ के आसपास के कुछ लोगों के पास कुछ अच्छे विचार थे, मुद्दों के इर्दगिर्द B FB एक _tiny bit_ आगे थे उनके प्रयोगों के साथ!

मैं वास्तव में लगता है कि getStyles() पैटर्न जो हम वर्तमान में काम करते हैं, उसकी अपनी समस्याएं हैं। @alitaheri और मेरे पास आज बहुत अच्छी चैट थी कि हमारे जेएस स्टाइल सेटअप (थीम्ड सहित) को बेहतर बनाने के लिए क्या करना चाहिए। मैं कल कुछ और जानकारी के साथ वापस जवाब दूंगा, जब मुझे कुछ नोट नीचे करने का मौका मिलेगा!

अगले हफ्ते मैं छुट्टी पर हूँ और मैं अपनी वर्तमान समस्याओं के समाधान के साथ प्रयोग करने जा रहा हूँ, जबकि सभी शैलियों को जेएस आधारित रखें।

बस इस पोस्ट को पढ़िए सबक एम्स्टर्डम (https://medium.com/@kitze/lessons-learned-at-react-am Amsterdam-51f2006c4a59#.o12h794or) पर सीखा और प्रस्तुतियों में से एक रिएक्ट में स्टाइल के समाधान के बारे में था: http :

एक आवश्यकता जिसके बारे में मैं सोचता रहता हूं और वह है जिसे मैंने स्पष्ट रूप से नहीं कहा है (कम से कम जो मुझे याद है) वेब-बनाम वेब का समर्थन करने और देशी प्रतिक्रिया करने की आवश्यकता है। यदि इरादा वेब-ओनली है (यानी मूल निवासी की कोई आवश्यकता नहीं है) तो ऐसे समाधान जो पहले से ही कुशल और मजबूत समर्थन वाले ब्राउज़रों का लाभ उठाते हैं और लोग बहुत परिचित हैं वे एक अच्छी बात होगी। यदि समर्थन प्रतिक्रिया मूल निवासी होना चाहिए तो वह आवश्यकताओं और आवश्यकताओं के एक अलग सेट को खोलता है। बस कुछ के बारे में सोचने के लिए और प्रौद्योगिकी विकल्पों के रूप में ध्यान में रखना, समझौता, आदि का मूल्यांकन किया जाता है।

@hburrows

उस प्रस्तुति को साझा करने के लिए धन्यवाद!

@alitaheri

हम उस प्रेजेंटेशन ( यहां एक डेमो ) में बताए गए लिबास को देखना चाहते हैं। यह हमें बहुत काम बचा सकता है। मैं इसे पहले देख रहा था लेकिन कुछ चीजें थीं जो मुझे पसंद नहीं थीं (जैसे कि मालिकाना हक में हर एक घटक को लपेटने की आवश्यकता)। हालाँकि, कुछ की चर्चा यहाँ हो रही है । उन्होंने उल्लेख किया है कि इस तरह के बदलावों को लागू करना होक-मुक्त उपयोग के लिए अनुमति देगा। मैं शीट लिखने के लिए उस पद्धति / डिज़ाइन को पसंद करता हूं ( aphrodite में भी देखा जाता है)।

वैकल्पिक रूप से, हम हमेशा jss लिए अपनी स्वयं की प्रतिक्रिया बाइंडिंग बना सकते हैं जो mixout साथ काम कर सकते हैं।

परिवाद लेखक ने यह भी कहा, जो कि मामले पर मेरे अपने विचारों के अनुरूप है:

हालाँकि आपको यह समझने की ज़रूरत है कि सब कुछ स्टाइल शीट होने का मतलब नहीं है। सबसे गतिशील परिवर्तनों के लिए आपको इनलाइन शैलियों का उपयोग करना चाहिए।

@nathanmark कार्यान्वयन बहुत छोटा है और मिश्रण करने के लिए बहुत आसान है: मुस्कराहट:
https://github.com/jsstyles/react-jss/blob/master/src/index.js
मुझे लगता है कि यह लाइब्रेरी हमारी मदद कर सकती है: +1:

@alitaheri हाँ मैं सहमत हूँ!

मैं jss लिए कुछ कस्टम बाइंडिंग के साथ प्रयोग कर रहा हूं - कुछ ऐसे मुद्दे / सीमाएं हैं जिनसे मैं निपटना चाहता हूं। (हालांकि कोर लीब पर काम करने की आवश्यकता हो सकती है)

रिएक्ट समुदाय में एक प्रचलित भावना प्रतीत होती है कि जावास्क्रिप्ट स्टाइल सबसे अच्छा समाधान है। यह भावना ठीक है, मैं उन लोगों से असहमत नहीं हूं जिनके पास है। हालांकि, जिस तरह से जावास्क्रिप्ट स्टाइलिंग को लागू किया गया है वह लगभग हमेशा सीएसएस डेवलपर की परवाह किए बिना है। कार्यान्वयन सभी अक्सर style=/[element property]= className= पक्ष में होता है और CSS डेवलपर को अपना काम करने से रोकता है।

जैसा कि मैंने पिछली टिप्पणी में पेश किया था, मुझे लगता है कि दोनों अच्छी तरह से एक साथ रह सकते हैं। बस शैली गुणों को लागू करने के लिए एक व्यवहारिक दृष्टिकोण रखना चाहिए। पुस्तकालय को शैली के गुणों के प्रत्यक्ष अनुप्रयोग को एक तत्व में समायोजित करना चाहिए, या उसे उन शैली गुणों से युक्त क्लासनेम बनाने के अप्रत्यक्ष दृष्टिकोण की अनुमति देनी चाहिए। एक पुस्तकालय जो डेवलपर को व्यवहार का चयन करने की अनुमति देता है वह एक आदर्श समाधान की तरह लगता है।

CSS deveoper के कई कारण हैं जो बस उनके दृष्टिकोण को नहीं खोना चाहते हैं। "सीएसएस का उपयोग क्यों करें" के बारे में जानने के लिए यह देखें कि लोग इसे लाभप्रद क्यों मानते हैं। आप शैलियों और अपने चयन के बीच एक शक्तिशाली चयनकर्ता भाषा के अमूर्त पाएंगे। आइए आज उस विशाल मात्रा में कोड को न भूलें जो सीएसएस उपयोगकर्ताओं को लाभ पहुंचाता है।

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

@rvbyron हमारे वर्तमान दृष्टिकोण को बदलने के लिए मुख्य कारणों में से एक यह है कि सीएसएस का उपयोग करके घटकों को अनुकूलित करना भी आसान है। jss जैसी लाइब्रेरी का उपयोग करने से हमें js- शैलियों का लाभ लेते हुए सीएसएस सुविधाओं का उपयोग करने की अनुमति मिलेगी। और चूंकि यह उन शैलियों को सीएसएस में बदल देता है, इसलिए वे आसानी से एक अतिरिक्त क्लासनाम के साथ बदसूरत हो सकते हैं बिना !important हैक।

@alitaheri सुनकर बहुत अच्छा लगा! मैं वास्तव में सामग्री-यूआई को एक क्लासनेम आधारित दृष्टिकोण को देखने के लिए उत्सुक हूं।

फिर, className दृष्टिकोण पर सुनने के लिए शानदार। इसे ध्यान में रखते हुए, मेरे कुछ सवाल हैं कि इसे कैसे लागू किया जा सकता है:

  • आपको क्या लगता है कि वर्ग नामकरण सम्मेलन नाम की तरह लग सकता है?
  • क्या सभी वर्ग नामों में उन पर "मुई" या अन्य उपसर्ग होगा?
  • क्या घटक नाम का डैश नोटेशन होगा?
  • क्या प्रत्येक घटक के मूल तत्व पर एक वर्ग नाम लागू किया जाएगा?

@rvbyron

आदर्श रूप में:

अनुकूलन उपसर्ग। बेहतर देव अनुभव और हैश प्रत्यय के लिए किसी प्रकार का डैश नोटेशन जो एक निश्चित स्ट्रिंग में सेट किया जा सकता है (इसलिए यदि थीम सेटिंग्स बदल दी जाती हैं, तो) कस्टम थीम आईडी का उपयोग कर। जिसमें कम वर्बोज़ उत्पादन विकल्प, या अनुकूलित करने के लिए कॉलबैक फ़ंक्शन भी शामिल है। और मुझे लगता है कि रूट पर एक वर्ग आमतौर पर हमेशा आवश्यक होने वाला है।

मुझे लगता है कि सूचीबद्ध और सुझाव की कई आवश्यकताएं हैं। तो, क्या इस चर्चा से कोई लेना-देना है? कार्रवाई का अगला कोर्स क्या है? क्या इस सामग्री-यूआई में प्रतिक्रिया-जेडएस को लागू करने पर कोई काम किया जा रहा है?

@rvbyron हां, हम पर्दे के पीछे के कुछ विचारों के साथ प्रयोग कर रहे हैं। इस मुद्दे को तब अपडेट करेंगे जब हमें कुछ और ठोस विचार मिलेंगे।

मेरी विनम्र राय में, मुझे लगता है कि सीएसएस और कभी भी इसका संकलन करने वाले भविष्य के हिस्से नहीं हैं। मुझे लगता है कि हम सभी सहमत हैं कि इनलाइन-शैलियों ने हमारे जीवन को बहुत आसान बना दिया है। ईमानदारी से, मैं केवल इनलाइन-शैलियों के साथ देख रहा हूँ: हॉवर!

मुद्दा यह है कि: हॉवर शैलियों का एक बहुत ही बुनियादी, बहुत महत्वपूर्ण हिस्सा है। एक तरफ फ्यूचरिज्म, एक समाधान के लिए समय से पहले प्रतिबद्धता से बचने के लिए विवेकपूर्ण हो सकता है जो मूल विशेषता को फिर से लागू करने के लिए धोखा और काम-के आसपास का सहारा लेना चाहिए।

@wtgtybhertgeghgtwtg हम एक ऐसे समाधान की दिशा में काम कर रहे हैं, जो वास्तविक :hover समर्थित है।

यह देखते हुए कि प्रमुख बिंदुओं का निर्णय लिया गया है (क्लास नाम और रूट एलिमेंट क्लासनेम के माध्यम से जेएसएस स्टाइलिंग), क्या सामग्री-यूआई v0.16.0 रिलीज के लिए कोई रोडमैप और समयरेखा है?

@rvbyron हमारे पास एक वादा किया गया समय नहीं है, लेकिन अब तक, स्टाइलिंग दृष्टिकोण और प्रदर्शन v0.16.0 रिलीज के लिए हमारा प्राथमिक ध्यान केंद्रित है और हम अभी सक्रिय रूप से काम कर रहे हैं। हम इस समस्या का निकट भविष्य में सामुदायिक फीडबैक के लिए उपयोग कर सकते हैं क्योंकि एक बार हम कुछ अन्य क्षेत्रों में सही दिशा में बस गए हैं क्योंकि यह आंतरिक, एपीआई, प्रवासन आदि से संबंधित है।

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

@newoga यहाँ jss को सामग्री-यूआई के लिए स्टाइलिंग सिस्टम के भविष्य के रूप में कहा गया है। यह एक ठोस पर्याप्त योजना है कि 16.0 रिलीज की प्रत्याशा में अन्य लोग हमारी परियोजनाओं में अब जेडएसबोर्डिंग शुरू कर सकते हैं?

@ सुरोरन अभी नहीं

@sorahn इस मुद्दे को हल करने के लिए वास्तव में चुनौतीपूर्ण समस्या के बारे में सामुदायिक प्रतिक्रिया प्राप्त करने के लिए डिज़ाइन किया गया है। कोई आधिकारिक निर्णय नहीं किया गया है। अब तक, सभी को केवल एक स्टाइल लाइब्रेरी या दृष्टिकोण का चयन और उपयोग करना चाहिए जो उन्होंने मूल्यांकन किया है, उनके और उनके प्रोजेक्ट के लिए सबसे अच्छा है।

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

tl; डॉ नो! जो आपके लिए सबसे अच्छा हो, वही करें जो कोई और न कहे :)

@nathanmark @newoga अपडेट के लिए धन्यवाद!

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

मैं मीडिया प्रश्नों में भाग गया, यह धागा (और अन्य) पढ़ें। मैं कुछ संभावित समाधानों और लेखों में काम करता हूं।

मुझे वास्तव में JSS + CSX समाधान (एक डेवलपर _joy_ परिप्रेक्ष्य से) पसंद है।

JSS लाभ और प्रदर्शन

@Sorahn के समान, मुझे एक सामग्री-यूआई मानक अपनाने में खुशी होगी, मुझे उम्मीद है कि इस दिशा में @nathanmark काम इस दृष्टिकोण को मान्य करता है। इसके अलावा, ऐसा लगता है कि दोनों CSX / JSS डेवलपर्स अपने पुस्तकालयों को अपनाने में मदद करने और बढ़ावा देने के लिए उत्सुक हैं।

@rosskevin जैसा कि हम बोलते हैं उस पर काम करना - यहाँ उन बातों पर विचार करना है जिन्हें आज तक किसी भी समाधान में शामिल नहीं किया गया है।

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

@sorahn त्वरित प्रश्न - आप सर्वर साइड रेंडरिंग के साथ विक्रेता उपसर्गों के बारे में क्या कर रहे हैं? क्या आप सर्वर पर सभी उपसर्गों का प्रतिपादन कर रहे हैं? या यूए पास कर रहे हैं?

@nathanmark हम उपयोगकर्ता एजेंट को ब्राउज़र में भेज रहे हैं, लेकिन मैं व्यक्तिगत रूप से उस पर निर्भर रहना पसंद नहीं करता। क्या केवल उन सभी को डिफ़ॉल्ट रूप से डालने के बारे में, और लोगों को उन्हें muiTheme ऑब्जेक्ट पर प्रॉप्स के माध्यम से ओवरराइड करने की अनुमति देता है, या इसके विपरीत, डिफ़ॉल्ट रूप से कोई भी नहीं करता है, और लोगों को चुनने की अनुमति देता है।

muiTheme: {
  // other stuff...
  stylePrefixes: ['webkit', 'moz', 'ms']
}

@sorahn आप जो चाहे कर सकते हैं, उपसर्ग, उपसर्ग नहीं, all पास करें, UA पास करें, आदि।

@nathanmark मैंने अभी [email protected] जारी किया है http://jsstyles.github.io/examples/index.html

बस अपने $ .02 में यहां फेंक रहा हूं ... जबकि मुझे वास्तव में इनलाइन शैलियों का विचार पसंद है और मेरे लिए कामोत्तेजक अपील, यह लगभग ऐसा लगता है कि अगर बूटस्ट्रैप 4 जैसे स्कैस में लाइब्रेरी प्रारूप में आधारित थे, तो यह आसान होगा।

मैं आमतौर पर बूटस्ट्रैप.scss फ़ाइल और _variables.scss फ़ाइल की प्रतिलिपि शाब्दिक रूप से कॉपी करता हूं, _mixins.scss फ़ाइल बनाते समय ... उस प्रतिलिपि के अंतर्गत ./lib/style के साथ, स्थानीय को संदर्भित करने के लिए मैं स्थानीयस्ट्रैप। Scss फ़ाइल को अद्यतन करता हूं। चर और मिक्सिन्स, बाकी सब चीजों के नोड_मॉड्यूल्स के मार्ग का उपयोग करते हुए ...

मैंने तब अपना वेबपैक कॉन्फिगरेशन सेटअप करने के लिए ./lib/style sassLoader config के लिए खोज पथ का हिस्सा बनाया।

इस तरह, मेरे पास एक main.scss फाइल हो सकती है जो बूटस्ट्रैप को लोड करती है, आदि ... मैं अपनी परियोजना के बाकी हिस्सों के भीतर संदर्भ चर और / या मिक्सिन्स ले सकता हूं, और जब मैं आउटपुट का निर्माण / बंडल करता हूं, तो उपयुक्त शैलियाँ होती हैं। शामिल थे।

इसके नीचे की ओर, क्या यह बंडल में scss सहित स्रोत-पूर्व (नहीं बिल्ड) और वेबपैक के रूप में सामग्री-ui का उपयोग करने के लिए लिखेगा। उस ने कहा, यह संभवतः मौजूदा चर, वर्गों और स्टाइलिंग मिक्सिन का उपयोग करने का सबसे सीधा आगे का रास्ता होगा।

फिर, मैं वास्तव में जेएस स्टाइलिंग के विचार को पसंद करता हूं, और एफ्रोडाइट की पेशकश की तरह टीबीएच ... मैं इनलाइन शैलियों के लिए एक स्टाइलिंग लाइब्रेरी के रूप में कुछ इसी तरह के काम कर रहा था (इसे डर्मा कहते थे), लेकिन एफ़्रोडाइट ने मुझे सब कुछ नहीं दिया पर और अधिक की योजना बनाई।

क्या स्टाइल समाधान को अंतिम रूप दिया गया है?

क्या इस पर कोई अपडेट हैं?

हां, next शाखा jss का उपयोग कर रही है

मैं अभी इस परियोजना में आया था और मैं इसके बारे में बहुत उत्साहित था क्योंकि यह बहुत अच्छा लग रहा था, उदाहरण पृष्ठ ने यह पता लगाना बहुत आसान कर दिया कि घटकों का उपयोग कैसे किया जाए और ऐसा लगता है कि यह व्यापक रूप से उपयोग किया गया था; हालाँकि, मैं इनलाइन स्टाइल्स से बहुत निराश हूँ और मुझे यह देखकर खुशी हुई कि आप लोग उनसे दूर हो रहे हैं। मैं जिन चीजों की ओर इशारा करना चाहता हूं उनमें से एक यह है कि इन घटकों के बाहर लेआउट के साथ कुछ भी किया जाना चाहिए और मूल घटक की स्टाइलिंग को संभालना चाहिए। सबसे निचले स्तर के घटक में किसी भी तरह से मार्जिन या पैडिंग नहीं होना चाहिए जो आसपास के तत्वों को दूर कर देगा ... खासकर क्योंकि यह इनलाइन स्टाइल्स के साथ खिलवाड़ के बिना ओवरराइड करना असंभव है, जिसका मतलब है कि मुझे चारों ओर खुदाई करने और यह पता लगाने की आवश्यकता है कि कैसे करना है उस। मैं वास्तव में इस परियोजना में बहुत आगे नहीं डूबा क्योंकि मैं दुर्भाग्य से इसे अनुपयोगी पाता हूं। मैं निश्चित रूप से इनलाइन बनाम सीएसएस स्टाइलिंग की बहुत चर्चा पढ़ता हूं। वैसे भी, आपने मुझे TextField में खो दिया है। शीर्ष पर एक मार्जिन है जो 14px है और नीचे 16px है। मुझे कोई आपत्ति नहीं है कि एक सरल शैली को ओवरराइड करने के लिए लिखना है, लेकिन इनलाइन स्टाइल के कारण यह असंभव है और यह मेरे लिए पूरी तरह से पागल हो जाएगा कि मुझे उच्च स्तर के घटक बनाने के लिए सिर्फ एक रिवर्स के साथ अपने घटक को लपेटने के रूप में उल्टा करना होगा और मार्जिन कर रहा है: -14px 0 -16px या इसे गणना के साथ थोड़ा समायोजित करें जिस तरह से मैं चाहता हूं, लेकिन किसी भी तरह से इसके लिए सही होने के लिए वास्तव में आवश्यक नहीं होना चाहिए। मैं इसे और अधिक पसंद करूंगा यदि आप एक क्लासनेम को एक प्रोप के रूप में पारित करने की अनुमति देंगे जैसे कि आप पहले से ही करते हैं तो लेआउट स्टाइलिंग को उस घटक पर लागू किया जा सकता है जिस तरह से आपका समुदाय इसे स्टाइल करना चाहता है। वैसे भी, यह मेरी $ .02 है।

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

मैं पूरी तरह से @ jbsmith969 के साथ हूं

यह पूरी तरह से मेरे लिए एक उच्च स्तरीय घटक बनाने के लिए पागल हो जाएगा, बस एक रिवर्स के साथ अपने घटक को लपेटने और मार्जिन करने के लिए: -14px 0 -16px या थोड़ा इसे गणना के साथ समायोजित करने के तरीके से मैं इसे चाहता हूं।

@ jbsmith969 मैं सहमत हूँ कि निम्न स्तर के घटकों में कोई भी लेआउट तर्क नहीं होना चाहिए। हालांकि, आपकी ऐप विशिष्टता के लिए एक उच्च सार घटक बनाना बिल्कुल भी पागल नहीं लगता है।
IMHO, यह सबसे शक्तिशाली पैटर्न में से एक है जो प्रतिक्रिया सक्षम करता है (अलगाव गुणों के लिए धन्यवाद)।

@oliviertassinari @ jbsmith969 यही हमने किया! हमने अपना CustomTextField घटक बनाया, जिसे मैं 2 params to (फ़ील्ड नाम, और रंग) की तरह पास करता हूं, और यह बस उन लोगों के चारों ओर एक छोटा सा तर्क करता है, फिर हम जो कुछ भी करते हैं उसके साथ material-ui/TextField प्रदान करते हैं चाहते हैं।

यह सभी तरह से नीचे है!

इसलिए प्रतिक्रिया के साथ हम अपना html ले रहे हैं और इसे अपने js में डाल रहे हैं और यह ठीक है और बांका है। लेकिन हमारे सीएसएस लेने और हमारे html में shoving? क्या वह किसी और के साथ अच्छी तरह से नहीं बैठता है?

सैस के हिलने से क्या फायदा था?

मुझे पुराने ज़माने का कहो, लेकिन हमारे js / html और css को अलग रखने के बारे में क्या गलत है?

मैं वैध रूप से कुछ उत्तरों की तलाश में हूँ ...

Https://github.com/callemall/material-ui/issues/3614#issuecomment -249095805 से संबंधित, स्टाइलिंग बस घटक बन जाता है।

मैं सीएसएस कक्षाओं को नए घटकों के रूप में देखता हूं: (उदाहरण के लिए btn-danger -प्रवर्तक से)

const DangerButton = ({ hoverColor, style, ...others }) => {
    return (
        <MUI.FlatButton
            hoverColor={hoverColor || Colors.pink100}
            style={{ color: Colors.black, ...style }}
            {...others}
        />
    );
};

परिवर्तन एक दर्द है, हालांकि ..

( @ jbsmith969 के लिए , MUI मटीरियल डिज़ाइन कल्पना का अनुसरण करता है। यदि मैं कल्पना का पालन नहीं करना चाहूंगा, तो मैं कुछ वर्कअराउंड करने की उम्मीद करूंगा। हालांकि, मैं मानता हूं कि MUI को हैक करना मुश्किल है, लेकिन इसका मुख्य कारण असंगत अजीब है। घटक सहारा, इसलिए नहीं कि उनकी शैली इनलाइन हैं)

@vizath सही मुझे निश्चित रूप से एक ही विचार है। लेकिन इस समाधान के क्या फायदे हैं?

अगर कोई ऐसा समाधान था जो वास्तव में कम से कम और साथ ही सीएसएस करता है, तो मैं इसे एक शॉट देने पर विचार करूंगा। हालांकि, चूंकि वर्तमान में कोई समाधान नहीं है (कि मुझे पता है) जो कि कैविट के बिना ऐसा कर सकता है, मुझे वास्तव में एपल दिखाई नहीं देता है।

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

Jn का उपयोग करके घटक की शैलियों को ओवरराइड करने के बारे में आप next में नवीनतम कोड का उपयोग कर रहा हूं

संपादित करें: ठीक है, केवल यह पता लगाया कि यह अभी भी पूरी तरह से लागू नहीं हुआ है। मेरी गलती! 😬

मुझे ऑब्जेक्ट कुंजी में मृत कोड को खत्म करने का एक अच्छा तरीका अभी तक नहीं मिला है, और जेएसएस के साथ यह शैलियों को संग्रहीत करने के लिए वस्तुओं का उपयोग करना अनिवार्य बनाता है।

next ब्रांच (जो समाप्त नहीं हुआ है) के एक घटक में यादृच्छिक उदाहरण: https://github.com/callemall/material-ui/blob/b372f6223ec2528dbe02fff480233488445b7/src/IconButton/IconButton#sjj##
मैं मज़बूती से ऐसा तरीका नहीं खोज सकता कि primary और accent वर्गों का उपयोग न किया जाए।

मुझे यह पसंद नहीं था कि जिस तरह से MUI पहले इनलाइन शैलियों का प्रबंधन कर रहा था, उसी कारण से (लिंट अनसोल्ड वेरिएबल्स को पकड़ता होगा यदि शैलियों को अलग-अलग परिभाषित किया गया था, तो https://github.com/callemall/material-ui/blob/ देखें 60a202fdc9645aa00f20c52e5152f168a1b0031b / src / IconButton / IconButton.js # L26)।

सैस के हिलने से क्या फायदा था?

@gdaunton यह इनलाइन-स्टाइल / सैस दृष्टिकोण का उपयोग नहीं करने के बारे में एक तरफ निर्भर करता है।

उपयोगकर्ता के दृष्टिकोण से , यह निम्नलिखित सुधार प्रदान करने वाला है:

  • तेज़ प्रतिक्रिया प्रदान करने की विधि, जैसा कि हम कैश की गई सीएसएस शीट पर भरोसा करने जा रहे हैं।
  • सरलीकृत शैली ओवरराइडिंग, क्योंकि सीएसएस पूर्वता इनलाइन शैली एक से कम है और उपयोगकर्ता शीट को बदलने के लिए पहचानने के लिए DevTools का उपयोग कर सकते हैं।
  • सर्वर साइड रेंडरिंग करते समय सबसे पहले पेंट करें।

    • उपयोगकर्ता महत्वपूर्ण सीएसएस शीटों को इनलाइन करने में सक्षम होंगे, और पृष्ठ में केवल एक का उपयोग करेंगे। ऐसा कुछ है जो आप _Bootstrap_ के साथ नहीं कर सकते क्योंकि यह बड़ा अखंड है

    • उपयोगकर्ता उत्पादन में वर्ग के नाम की कुंजियों को खराब करने में सक्षम होना चाहिए।

  • कोई अंतर्निहित चेन निर्भरता जैसे _scss-loader_ या _Webpack_ नहीं।

एक योगदानकर्ता / अनुरक्षक दृष्टिकोण से , यह निम्नलिखित सुधार प्रदान करने जा रहा है:

  • कोई और अधिक सीएसएस लाइनर
  • कोई और अधिक पूर्व प्रोसेसर सीएसएस
  • कोई सीएसएस सिंटैक्स सीखने के लिए नहीं
  • घटक को स्टाइल करने के लिए बहुत अधिक शक्तिशाली भाषा: जावास्क्रिप्ट
  • स्टाइल इंजन को दूर करने की संभावना खोलें। जैसे प्रतिक्रिया-शैली का उपयोग करके

यह रेपो वही क्यों अपनाने की कोशिश कर रहा है जो एक अल्फ़ा स्टेज विचार लगता है

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

कम से कम और साथ ही सीएसएस करता है

CSS को स्टाइल डॉक्यूमेंट्स में शुरू से डिज़ाइन किया गया था, न कि कंपोनेंट्स के लिए
यह हमारे उद्योग में एक प्रमुख बदलाव है।

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

हां, अगली शाखा jss का उपयोग कर रही है

@nathanmarks मैं इस बदलाव को पकड़ने के लिए कहां जा सकता हूं?

यह पाया: https://github.com/callemall/material-ui/blob/next/docs/customization/themes.md

@bramick लगता है कि यह next क्योंकि यह 0.15.0 से शुरू हो रहा है

ठीक है, तो मुझे याद आ रहा है कि नया क्या है ... कोई भी?

@bramick next को अभी तक पूरी तरह से प्रलेखित नहीं किया गया है (हालाँकि इसमें प्रलेखन साइट है)। अभी के लिए आपको स्रोत पढ़ना होगा और आप प्रलेखन साइट स्रोत कोड का संदर्भ ले सकते हैं कि यह कैसे काम करता है। बस यह एहसास है कि यह अभी भी एक चलती लक्ष्य हो सकता है।

@oliviertassinari वाह! में गहराई से प्रतिक्रिया के लिए धन्यवाद।

मैं यह नहीं कह सकता कि मैं पूरी तरह से सहमत हूं, लेकिन आपने मेरे कुछ सवालों को टाल दिया।

मैं सहमत हूं, हमें एक ऐसी दुनिया की ओर बढ़ना चाहिए, जहां हमारी शैली घटक आधारित हो, और सीएसएस उसके लिए महान नहीं है। हालाँकि, (मेरी राय में) अभी भी कुछ झुर्रियों के लिए लोहे को बाहर करने से पहले हमें इसे बड़े पैमाने पर अपनाना चाहिए।

हालांकि मैं उत्सुक हूं, क्या किसी ने यह देखने के लिए देखा है कि क्या इस और मानक सीएसएस के बीच कोई प्रदर्शन अंतर है? मुझे ऐसा लगता है कि जावास्क्रिप्ट पर अभी भी बढ़त हो सकती है; इसे लोड करने के बाद भी इसकी शैलियों को उत्पन्न करना और इंजेक्ट करना है।

@gdaunton ने jg के प्रदर्शन के बारे में https://github.com/cssinjs/jss/blob/master/docs/performance.m पर पढ़ा

यह मानक सीएसएस है जैसा कि रेंडर किया गया है, पेज पर जोड़ा गया है, लेकिन घटक के भीतर लिखा गया है। मैं next ब्रांच का उपयोग कर रहा हूं और यह काफी अच्छा काम कर रहा है।

@newoga क्या आप मुझे एक लिंक भेज सकते हैं जिसका आप उल्लेख कर रहे हैं?

@bramick OMG! यह वास्तव में आसान है, है ना? उदाहरण के लिए, next में बटन के लिए यहां देखें

मैं JSX की सफलता के बाद जावास्क्रिप्ट फ़ाइल के अंदर CSS डालने की अपील को समझता हूं, लेकिन मुझे यकीन नहीं है कि अगर किसी एप्लिकेशन के सभी CSS के साथ भी ऐसा करना अच्छा है। मुझे पता है कि JSS में कुछ अच्छे उपयोग के मामले हैं, उदाहरण के लिए जब सुपर जटिल गतिशील शैलियों के साथ काम करते हैं।

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

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

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

मेरी सबसे बड़ी चिंता यह है कि शैली की जानकारी घटक परिभाषा को अव्यवस्थित कर देगी।

यह पूरी तरह से आप पर निर्भर करता है, आप अपने कोड को कैसे व्यवस्थित करते हैं, इस पर निर्भर करता है यदि आप कुछ नियमों से चिपके रहते हैं, तो कुछ भी बुरा नहीं होता (2 साल के उत्पादन अनुभव से बात करना)।

जावास्क्रिप्ट वस्तुओं के साथ व्यक्त सीएसएस बहुत अधिक क्रिया और व्यवस्थित करने के लिए कठिन है।

यह वास्तव में कम क्रिया है क्योंकि आपके पास कोड पुन: उपयोग और उच्च पुनरावृत्ति का उच्च स्तर है।

डेवलपर्स के लिए, सबसे बड़ा नुकसान यह है कि वे सीएसएस गुणों और उनके मूल्यों के लिए सभी इंटेलीजेंस जानकारी खो देते हैं।

मुझे लगता है कि सामग्री-यूआई के उपयोगकर्ताओं को यहां लक्ष्य देना है कि वे स्टाइल के लिए जो चाहें उपयोग करें। CSS के लिए स्वतः पूर्णता एक तर्क है जिसे मैं अक्सर सुनता हूं। ज्यादातर यह उन लोगों से आता है जो किसी भी cssinjs का उपयोग नहीं करते थे और इसके लिए कुछ उपयुक्तताएं खोने का डर था जो वे करते थे।

मुझे अपनी परियोजनाओं में जटिलता जोड़ने में कोई आपत्ति नहीं है, अगर यह अधिक मूल्य लाता है।

मुझे लगता है कि पूरा बिंदु जटिलता को कम कर रहा है और कोडबेस को अधिक सुसंगत और उपयोग करने और समझने में आसान बना रहा है, लेकिन एक ही समय में सभी जटिल परिदृश्य कवर होते हैं।

मेरी सबसे बड़ी चिंता यह है कि शैली की जानकारी घटक परिभाषा को अव्यवस्थित कर देगी।

हमारी परियोजना में हमने अलग-अलग फ़ाइलों में घटकों की शैली की जानकारी निकाली और उन्हें वेबपैक के साथ लोड किया। मुख्य लाभ यह है कि सभी अच्छी तरह से व्यवस्थित है और वेबपैक प्रति घटक कोड को बंडल कर सकता है, इसलिए जेएस कोड और स्टाइल जानकारी का कोड विभाजन संभव है।

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

यह जाँच करें

खेल में प्रौद्योगिकियों को बदलने में बहुत देर हो चुकी है, लेकिन मैं मानता हूं कि स्टाइल-घटकों को बहुत आशाजनक है। SSR, मीडिया क्वेश्चन, बहुत अच्छा वाक्यविन्यास वगैरह को हैंडल करता है। JSS की तुलना में यह ऑटोप्रिक्सिंग और थीमिंग को भी हैंडल करता है।

जहाँ तक मुझे पता है कि यह अंदर पोस्टर्स का उपयोग करता है, जो रनटाइम के समय उपयोग होने पर स्वीकार्य प्रदर्शन नहीं देगा, क्योंकि यह एक फुल सीएसएस पार्सर है जिसमें बहुत सारे एज केस हैंडलिंग और प्लग इन हैं। मैं इसे JSS JSON को प्रीप्रोसेस करने की कल्पना कर सकता हूं, लेकिन ईमानदार होने के लिए मुझे CSS भाषा का उपयोग करने और JS वैरिएबल और फ़ंक्शन कॉल के साथ मिश्रण करने में बहुत अधिक मूल्य नहीं दिखता है।

बस उल्लेख करने के लिए, स्टाइल-घटकों का वर्तमान निर्माण 250kb है, जो पहले से ही छोटा है । निष्पक्ष होने के लिए क्योंकि वे रिएक्ट और सह को बंडल करते हैं, लेकिन फिर भी, यहां तक ​​कि अकेले पोस्टसीएसएस के पार्सर में 13 केबी (अनमनीकृत, 2kb ~ हो सकते हैं) जो पहले से ही लगभग जेएसएस या फेला के आकार का है।

यह (प्रस्तुति) घटक के त्वरित और सरल प्रोटोटाइप के लिए हालांकि प्यारा है, लेकिन मुझे कोई लाभ नहीं दिखता है / अन्य समाधान प्रदान नहीं कर सकते हैं।

मैं सहमत हूँ, मैंने इसे एक पुस्तकालय में विकसित करने की कोशिश की, जिसे प्रकाशित करना बहुत भारी था। मुझे यकीन है कि वे इसके साथ प्रगति करेंगे, लेकिन ऐसा प्रतीत होता है कि यहां जेएसएस का काम लगभग पूरा हो चुका है और अधिकांश समान लाभ प्रदान करते हैं।

मैंने हाल ही में रिएक्शन-टूलबॉक्स का उपयोग किया है, वे थीम के लिए CSS मॉड्यूल का उपयोग करते हैं जो मूल रूप से सिर्फ webpack के sassLoader पर निर्भर करता है। मेरे लिए यह वास्तव में अच्छी तरह से काम किया। शायद यह जांच के लायक है।

अरे, मुझे @mgcrea की राय को दूसरा प्रतिक्रिया-टूलबॉक्स थीमिंग सपोर्ट बस अद्भुत है - इस बात को अनुकूलित करने के रूप में कि घटक कैसे दिखते हैं फ्रंटएंड स्टोरी का सबसे महत्वपूर्ण पहलू है।

मुझे नहीं लगता कि किसी को भी कभी भी अच्छे पुराने CSS स्टाइल की उम्मीद करनी चाहिए, कभी सामग्री यूआई में प्रथम श्रेणी का नागरिक होना चाहिए, यही कारण है कि react-toolbox शुरू किया गया था

इस विषय के बारे में बहुत सारे मुद्दों और पोस्टों को पढ़ने के बाद कम से कम मेरी धारणा है। मैं अस्पष्ट रूप से उन चीजों को याद कर सकता हूं, जैसे टीम बेहतर रिएक्टिव नेटिव कम्पैटिबिलिटी और स्टाइल एज के मामलों पर कई टिप्पणियां करती हैं जो जेएसएस के साथ हल करने के लिए आसान हैं।

हालाँकि वह जानकारी कई चर्चाओं के बीच खो जाती है। क्योंकि यह एक ऐसा विवादास्पद विषय है, मुझे लगता है कि यह अविश्वसनीय मूल्य का होगा यदि कोई परियोजना के लक्ष्यों और दर्शन के बारे में विकी पेज (कोर मेंटेनर द्वारा लिखित) के बारे में हो सकता है, इस पर एक मजबूत टिप्पणी के साथ कि क्यों जावास्क्रिप्ट स्टाइल इतनी घनीभूत है ढांचा।

मैं वास्तव में सामग्री यूआई पसंद करता हूं क्योंकि यह रिएक्ट के लिए सबसे सक्रिय और पॉलिश सामग्री स्टाइलिंग फ्रेमवर्क है। हालाँकि, जब मैं थर्ड पार्टी कंपोनेंट्स के साथ यूनिफाइड स्टाइल रखना चाहता हूँ तो JSS मेरे लिए बहुत सारे सिरदर्द का कारण बनता है।

खुद के लिए, मैं जिस तरह से सामग्री-यूआई को प्रतिक्रिया-टूलबॉक्स जैसी किसी चीज के विपरीत स्टाइल करता हूं, उसकी सराहना करता हूं और यहां बताया गया है: हमारी एक परियोजना में, हमारे पास उपयोगकर्ता के लिए गतिशील थीम चुनने की क्षमता है:

Imgur

क्योंकि उपयोगकर्ता एक ऐसे रंग की जोड़ी का चयन कर सकता है जिसे हम समय से पहले निर्धारित नहीं कर सकते हैं, जो भी योजना हम उपयोग करते हैं वह अत्यधिक गतिशील होनी चाहिए। साथ में, विषय में परिवर्तन लाइव हो सकता है, b / c सभी शैलियों को इनलाइन उत्पन्न किया जाता है: मुझे केवल इतना करना है कि इसे प्राथमिक / उच्चारण रंग दें।

प्रतिक्रिया-टूलबॉक्स एट में। अल।, यह मैं क्या देख सकता है से एक घर का काम के अधिक लगता है।

इस खास मामले में @jrop याने आपको डायनामिक JSS की ज़रूरत है लेकिन कई अनुप्रयोगों के लिए जो एक महत्वपूर्ण आवश्यकता नहीं है और कस्टमाइज़ करने की वर्तमान कहानी (UI परीक्षण के बारे में भी नहीं बोलना) सामग्री-उई बस स्वीकार्य नहीं है। हम एक अत्यधिक दृश्य और डिज़ाइन किए गए ऐप का निर्माण कर रहे हैं जो केवल डिफ़ॉल्ट सामग्री-यूआई लुक का उपयोग नहीं कर सकते हैं, क्योंकि हमें इसके व्यवहार भागों की आवश्यकता है / चाहते हैं।

@DominikGuzei आप next शाखा को अनुकूलित कर सकते हैं। यह _not_ है जिसे आप वर्तमान रिलीज़ पर देखते हैं।

दोस्तों, मुझे ऐसा लग रहा है कि हम यहाँ एक मरे हुए घोड़े को पीट रहे हैं। next शाखा ने थीमिंग के साथ एक अलग (बहुत बेहतर) पथ चुना है और ओवरराइड के लिए अनुमति देता है। यह इनलाइन शैलियों का उपयोग नहीं कर रहा है और मैंने जो अनुरोध देखा है वह लचीलापन प्रदान करता है। अन्य लोगों के लिए जो अधिक कस्टमाइज़ेबिलिटी चाहते हैं, वे next घटकों पर HOC का उपयोग कर सकते हैं और अपनी खुद की स्टाइलशीट लिख सकते हैं।

@nathanmark , जब से यह निर्णय किया गया है (जहाँ तक मैं बता सकता हूँ, और काफी अच्छी तरह से काम करता है)

अगर कोई परियोजना के लक्ष्यों और दर्शन के बारे में विकी पेज (कोर मेंटेनर द्वारा लिखित) के बारे में हो सकता है, तो इस बात पर एक मजबूत टिप्पणी के साथ कि क्यों जावास्क्रिप्ट स्टाइल को फ्रेमवर्क में बांधा गया है।

@fgarcia मैंने इस सप्ताह की शुरुआत में पेरिस में एक स्थानीय कार्यक्रम में सामग्री-यूआई द्वारा उपयोग किए गए स्टाइल दृष्टिकोण के विकास के बारे में एक प्रस्तुति दी है। आपको स्लाइड और _notes_: A जर्नी को बेहतर अंदाज में देखने का शौक हो सकता

उपयोगकर्ता गतिशील विषयों का चयन करने के लिए

CSS-Modules के स्टैटिक स्टाइल जनरेशन पहलू के कुछ परिणाम हैं।
रनटाइम पर इंजेक्शन लगाने की शैली कम लागत वाली है, लेकिन हमें इसकी अनुमति दें:

  • शैली के कार्यान्वयन के साथ हमें अधिक लचीलापन देता है। जैसे CircularProgress का एक निश्चित thickness जो सीएसएस कीफ़्रेम एनीमेशन को कैसे लागू किया जाता है। गतिशील शैली के साथ, हम एक मोटाई गुण जोड़ सकते हैं ताकि उपयोगकर्ता मूल्य को गतिशील रूप से बदल सकें। ⚠️ गाली नहीं देना है।
  • बड़े पैमाने पर ऐप पर, यह स्क्रीन पर प्रदर्शित घटक के लिए केवल आवश्यक शैलियों को इंजेक्ट करने की अनुमति देता है। पृष्ठ को बूटस्ट्रैप करने के लिए ब्राउज़र द्वारा आवश्यक काम की मात्रा को कम करना। इसलिए, बातचीत के बाद पहले पेंट करने के लिए तेज़ समय। उदाहरण के लिए SSR के साथ गंभीर सीएसएस inlining।
  • उपयोगकर्ताओं को गतिशील विषय और घटकों की भिन्नता का उपयोग करने की अनुमति दें। उदाहरण के लिए एक बटन का रंग बदलना जिसमें सभी रंग भिन्नताएं हों।

@oliviertassinari यह सुनने के लिए बहुत बढ़िया है। मेरे पास सीएसएस मॉड्यूल के बारे में एक गैर-मानक बिंदु-दृश्य हो सकता है, लेकिन मुझे नहीं लगता कि वे सभी उपद्रव के लायक हैं। मैं इस कारण से सामग्री-यूई के माध्यम से जेएसएस को सुनने के लिए उत्साहित था। यह सीएसएस मॉड्यूल की तुलना में जावास्क्रिप्ट के दर्शन के साथ बहुत अधिक इनलाइन लगता है।

@oliviertassinari लाभों के सारांश के लिए धन्यवाद। जब आप इन पहलुओं को देखते हैं तो यह निश्चित रूप से दिलचस्प होता है। इस समय JSS और इसके इकोसिस्टम का भी नकारात्मक पक्ष यह है कि यह सब खून बह रहा है और आप साधारण सीएसएस-मॉड्यूल + एसएएसएस के साथ अच्छी तरह से स्थापित टूल चेन और नॉलेज बेस पर भरोसा नहीं कर सकते हैं। लेकिन यह वह कीमत है जो आप नवाचार के लिए भुगतान करते हैं, यह सिर्फ इस बात पर निर्भर करता है कि आपकी कुछ आवश्यकताएं हैं / बग्स की कीमत और कम दस्तावेज वाले पथ का भुगतान करने के लिए तैयार हैं।

JSS को css- मॉड्यूल से पहले बनाया गया है। सीएसएस-मॉड्यूल तेजी से लोकप्रिय हो गए हैं क्योंकि इसने अधिकांश उपयोगकर्ताओं के लिए एक समस्या को हल कर दिया है बिना वाक्यविन्यास को भी मौलिक रूप से बदल दिए।

कहा जा रहा है, आप प्रतिक्रिया का उपयोग कर रहे हैं, जो थोड़े "नई" तकनीक भी है। यदि आप SASS चाहते हैं, तो शायद आपको वानीलाज या बैकबोनज भी चुनना चाहिए)

@ कॉफ रिएक्ट एक बहुत ही अलग कहानी है क्योंकि यह सैकड़ों हजारों

SASS सबसे स्थापित सीएसएस प्रीप्रोसेसर में से एक है और किसी भी परियोजना में इस्तेमाल किया जा सकता है - यह बहुत ठोस है और मेज पर बहुत अधिक मूल्य लाता है। इसलिए मैं केवल JSS जैसी किसी चीज़ का चयन करना चाहूंगा, यदि बिल्कुल आवश्यक हो (जैसे: डायनामिक थीम के कारण), लेकिन कई डीआरएस के साथ एक वाणिज्यिक सॉफ्टवेयर प्रोजेक्ट में वर्षों के अनुभव / रूपरेखा / ज्ञान आधार आदि को फेंकना पसंद नहीं करता। इसलिए मैं JSS में केवल डायनामिक थीम पहलू और शेष / css- मॉड्यूल के साथ निर्माण पर विचार करूंगा।

मैं इस सोचने के तरीके को समझता हूं, लेकिन मैं इसे गर्भनिरोधक के रूप में भी मानता हूं और नवाचार और उद्योग को धीमा करने के लिए इसे दोष देता हूं।

आप दोनों का समर्थन क्यों नहीं करते? जावास्क्रिप्ट में लिखा शैलियों और सीएसएस मॉड्यूल में लिखा शैलियों? उदाहरण के लिए, अगर मुझे https://github.com/callemall/material-ui/blob/next/src/Button/Button.js पर एक नज़र है, तो यह एक प्रस्ताव द्वारा पारित वर्ग-नामों का उपयोग करना काफी आसान होगा ( https://github.com/javivelasco/react-css-themr) उपयोग करने के बजाय:

const classes = this.context.styleManager.render(styleSheet);

है ना?

ऐसा नहीं लगता है कि जेएसएस या सीएसएस का उपयोग करने के बारे में चर्चा एक अंत (अभी तक?) पा रही है। मेरे लिए यह इस समय एक पचास / पचास की तरह लग रहा है।

एसएएसएस के बारे में, प्रतिक्रिया-टूलबॉक्स वर्तमान

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

जहाँ भी एक * शैली का प्रस्ताव है, वहां केवल * className प्रोप जोड़ने पर विचार करें। अवधि।

पूर्ण प्रकटीकरण: मैं एक खुश Aphrodite उपयोगकर्ता हूँ।

className जोड़ने पर अभी भी !important हैक्स की आवश्यकता होगी क्योंकि इनलाइन शैलियों ( style प्रॉपर्टी) से पूर्वता प्राप्त होती है।

@ लिगाज़ बेशक, आप सही कह रहे हैं। Aphrodite डिफ़ॉल्ट रूप से हर चीज में !important जोड़ता है, इसलिए शायद "व्यापक उपयोग" के बारे में मेरी सोच बुरी तरह से तिरछी है।

@ लीगाज़ @estaub - next पहले से ही कोडित _without_ style और घटकों के उपयोगकर्ताओं को className प्रदान करके ओवरराइड करने की अनुमति देता है (और जटिल घटकों के विभिन्न भागों में कई वर्ग के नाम) ।

अनुरक्षकों द्वारा next शाखा पर स्टाइल प्रतिमान सेटअप JSS का उपयोग कर रहा है। किसी व्यक्ति या विषय के आधार पर ओवरराइड करना आसान है।

यह घोड़ा मर चुका है। चलो इसे पीटना बंद करो। @oliviertassinari मैं आपको next दिशा पर कथन के साथ इस समस्या को बंद करने और बंद करने का सुझाव देता हूं।

हाय @rosskevin - क्या आप मुझे किसी भी उदाहरण में

मैं वर्तमान में एक नई परियोजना के लिए चौखटे देख रहा हूं, मैं सामग्री यूआई का उपयोग करना पसंद करूंगा लेकिन हमें उन परिवर्तनों की आवश्यकता होगी जिनका आपने उल्लेख किया है। मैंने एक परीक्षण परियोजना में अगली शाखा जोड़ दी है और एक सरल घटक जोड़ा है और मैं एक इंस्पेक्टर को इनलाइन शैलियों से भरा हुआ देख रहा हूं, इसलिए मैं अनुमान लगा रहा हूं कि मैं कुछ गलत कर रहा हूं?

किसी भी अधिक विवरण वास्तव में उपयोगी होगा!

धन्यवाद

@giuseppepaul next npm पर प्रकाशित नहीं हुआ है क्योंकि यह पूर्व-अल्फ़ा है और अभी पूरा नहीं हुआ है। आप https://github.com/callemall/material-ui.git#next पर क्लोन कर सकते हैं और docs/site सकते हैं यह देखने के लिए कि अधिक इनलाइन शैलियाँ नहीं हैं। इसमें डीमोस की उचित मात्रा भी है।

मैं अपने स्वयं के निजी संस्करण को प्रकाशित कर रहा हूं (ताकि मैं अपडेट को नियंत्रित कर सकूं) और जल्द ही इसका उपयोग उत्पादन एप्लिकेशन के रूप में कर रहा हूं।

यह घोड़ा मर चुका है। चलो इसे पीटना बंद करो। @oliviertassinari मैं आपको सुझाव

वह घोड़ा पूरी तरह से मरा नहीं है। लेकिन निश्चित रूप से एक तंग जगह में spot
मैं सहमत हूं, आइए इस मुद्दे को बंद करें।

उस कहानी पर उनकी कड़ी मेहनत के लिए @nathanmark का एक बड़ा धन्यवाद!
मैंने # 5718 के साथ आगे की सड़क पर अधिक जानकारी एकत्र की है।

नमस्ते,
IconButton पास CSS3 transition संपत्ति है। कार्ड @next के डॉक्टर की जटिल बातचीत में, आपने आइकन को उलट जाने पर एक परिवर्तन जोड़ने के लिए transition जोड़ा है।
यदि मैं अपने ऐप पर ऐसा करता हूं, तो एक संक्रमण (रिपल या रिवर्स) दूसरे को ओवरराइड करता है (एक तत्व में दो गुण नहीं हो सकते हैं अन्यथा एक दूसरे को ओवरराइड करता है)।
हालाँकि आपके शेवरॉन आइकन ने उस पर सफलतापूर्वक दो transitions लागू किया है। क्योंकि किसी न किसी रूप में आप IconButton और आपके कोड में परिभाषित द्वारा प्रदान किए गए संक्रमण को मर्ज करते हैं। आप इसे कैसे प्राप्त करेंगे?
कुछ अन्य सामान मेरे लिए अस्पष्ट हैं और मुझे संबंधित डॉक्टर नहीं मिल सकते हैं। theme में breakpoints (यहाँ उपयोग नहीं किया गया) transitions (यहाँ प्रयुक्त) के रूप में बहुत सी विधियाँ / गुण हैं। वहाँ पहले से ही दस्तावेज़ के बारे में है theme क्या की संपत्ति MuiThemeProvider.createDefaultContext() के रूप में यह उपयोगी प्रतीत होता है विशेष रूप से है कि यह अपने कोड के अंदर बड़े पैमाने पर प्रयोग किया जाता है पर लौट आएगा।
this.context.styleManager.render(styleSheet) ? क्या ?
आप jss-theme-reactor का भी उपयोग करते हैं, जिसे मैं अभी भी react-jss की तुलना में बात नहीं समझता।

@NitroBAY यह थ्रेड समाप्त हो गया है। कृपया सही चैनल पर आपसे प्रश्न पूछें। यदि आप बग को नोटिस करते हैं या चाहते हैं कि दस्तावेज़ में सुधार हो, तो एक समस्या खोलें। अन्यथा आप gack.im के StackOverflow का उपयोग कर सकते हैं।

क्या यह पृष्ठ उपयोगी था?
0 / 5 - 0 रेटिंग्स