React.js इनलाइन शैली सर्वोत्तम अभ्यास

Question

मुझे पता है कि आप इस तरह से प्रतिक्रिया वर्गों के भीतर शैलियों को निर्दिष्ट कर सकते हैं:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

क्या मुझे इस तरह से सभी स्टाइल करने का लक्ष्य रखना चाहिए, और मेरी सीएसएस फ़ाइल में कोई भी शैली निर्दिष्ट नहीं है?

या मुझे इनलाइन शैलियों से पूरी तरह से बचना चाहिए?

यह थोड़ा अजीब और गन्दा लगता है कि दोनों को करने के लिए - दो जगहों की जाँच की जानी चाहिए जब स्टाइल को ट्विक किया जाए।

Comments

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

— मन्त्रमन्त्रमन्त्र

Github.com/css-modules/css-modules का उपयोग करने पर विचार करें । github.com/gajus/react-css-modules एक प्रतिक्रिया कार्यान्वयन है (कि मैं लेखक हूं)। सीएसएस मॉड्यूल और रिएक्ट सीएसएस मॉड्यूल स्वचालित रूप से आपके घटक वर्ग के नाम को सीएसएस मॉड्यूल में मैप करते हैं जिन्हें दस्तावेज़ के दायरे में एक अद्वितीय नाम सौंपा गया है।

— गजस

मैं मीडिया क्वेरी लिखने के लिए CSS का उपयोग करता हूं। मैं बेस सीएसएस लाइब्रेरी से बूटस्ट्रैप जैसी कक्षाओं का भी उपयोग करता हूं।

— विजेस्ट

स्टाइल एलीमेंट का उपयोग स्टाइलिंग तत्वों के प्राथमिक साधनों के रूप में आमतौर पर अनुशंसित नहीं किया जाता है। ( reactjs.org/docs/dom-elements.html#style )

— ओमिद

आज तक, मैं एक सीएसएस-इन-जेएस समाधान का उपयोग करने की सलाह देता हूं। इसमें कमियां के बिना स्टाइल विशेषता के सभी फायदे हैं। मैंने एक उत्तर लिखा था stackoverflow.com/questions/26882177/…

— बेन कार्प

Answer 1

अभी तक बहुत सारे "सर्वश्रेष्ठ अभ्यास" नहीं हैं। हम में से जो रिएक्ट घटकों के लिए इनलाइन-शैलियों का उपयोग कर रहे हैं, वे अभी भी बहुत प्रयोग कर रहे हैं।

ऐसे कई दृष्टिकोण हैं जो बेतहाशा भिन्न होते हैं: रिएक्ट इनलाइन-शैली की तुलनात्मक चार्ट

सभी या कुछ भी नहीं?

जिसे हम "शैली" के रूप में संदर्भित करते हैं वास्तव में काफी कुछ अवधारणाएं शामिल हैं:

• लेआउट - एक तत्व / घटक दूसरों के संबंध में कैसे दिखता है
• उपस्थिति - एक तत्व / घटक की विशेषताएं
• व्यवहार और अवस्था - किसी दिए गए राज्य में एक तत्व / घटक कैसे दिखता है

राज्य-शैलियों से शुरू करें

प्रतिक्रिया पहले से ही आपके घटकों की स्थिति का प्रबंधन कर रही है, यह राज्य की शैली और व्यवहार को आपके घटक तर्क के साथ उपनिवेश के लिए एक प्राकृतिक फिट बनाता है।

सशर्त राज्य-कक्षाओं के साथ प्रस्तुत करने के लिए घटकों के निर्माण के बजाय, सीधे राज्य-शैलियों को जोड़ने पर विचार करें:

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

ध्यान दें कि हम शैली उपस्थिति के लिए एक वर्ग का उपयोग कर रहे हैं, लेकिन राज्य और व्यवहार के.is- लिए किसी भी उपसर्ग वर्ग का उपयोग नहीं कर रहे हैं ।

हम कई राज्यों के लिए समर्थन जोड़ने के लिए Object.assign(ES6) या _.extend(अंडरस्कोर / लॉश) का उपयोग कर सकते हैं :

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

अनुकूलन और पुन: प्रयोज्य

अब जब हम Object.assignइसका उपयोग कर रहे हैं तो यह बहुत आसान हो जाता है कि हम अपने घटक को विभिन्न शैलियों के साथ पुन: प्रयोज्य बना सकें। यदि हम डिफ़ॉल्ट शैलियों को ओवरराइड करना चाहते हैं, तो हम कॉल-साइट पर प्रॉप्स के साथ ऐसा कर सकते हैं, जैसे <TodoItem dueStyle={ fontWeight: "bold" } />:। इस तरह लागू:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

ख़ाका

व्यक्तिगत रूप से, मैं इनलाइन लेआउट शैलियों के लिए सम्मोहक कारण नहीं देखता। वहाँ कई महान सीएसएस लेआउट सिस्टम हैं। मैं सिर्फ एक का उपयोग करेंगे।

उस ने कहा, लेआउट शैलियों को सीधे अपने घटक में न जोड़ें। अपने घटकों को लेआउट घटकों के साथ लपेटें। यहाँ एक उदाहरण है।

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

लेआउट समर्थन के लिए, मैं अक्सर घटकों को डिज़ाइन करने का प्रयास करता हूं 100% widthऔर height।

दिखावट

यह "इनलाइन-शैली" बहस का सबसे विवादास्पद क्षेत्र है। अंततः, यह आपके डिजाइनिंग घटक और जावास्क्रिप्ट के साथ आपकी टीम के आराम पर निर्भर है।

एक बात निश्चित है, आपको एक पुस्तकालय की सहायता की आवश्यकता होगी। ब्राउज़र-स्टेट्स ( :hover, :focus), और मीडिया-क्वेश्चन कच्चे रिएक्ट में दर्दनाक हैं।

मुझे रेडियम पसंद है क्योंकि उन कठिन भागों के लिए वाक्य रचना SASS के मॉडल के लिए बनाया गया है।

कोड संगठन

अक्सर आप मॉड्यूल के बाहर एक स्टाइल ऑब्जेक्ट देखेंगे। एक टूडू-सूची घटक के लिए, यह कुछ इस तरह दिख सकता है:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

कार्य करता है

अपने टेम्पलेट में शैली तर्क का एक गुच्छा जोड़ने से थोड़ा गड़बड़ हो सकता है (जैसा कि ऊपर देखा गया है)। मुझे शैलियों की गणना करने के लिए गटर कार्य करना पसंद है:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

आगे देख रहे हैं

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

मुझे मदद करने में खुशी हो रही है जब आप रास्ते में नई खोज करते हैं :) मुझे मारो -> @ शांतिवादी

Comments

खूब पढ़ा। साथ ही आपके द्वारा, इस @ प्रासंगिकता की सराहना की । #accepted

— eye_mew

"अपने घटकों को लेआउट घटकों के साथ लपेटें": इतना स्पष्ट है, लेकिन वास्तव में मुझे क्या चाहिए।

— tandrewnichols

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

— एलेक्स्रसेल 13

@alexrussell धन्यवाद! मुझे लगता है कि यहाँ जवाब अभी भी बहुत अच्छी तरह से पकड़ लेता है। एक क्षेत्र जो बदल गया है वह यह है कि एफ्रोडाइट सामुदायिक-पसंदीदा इनलाइन-स्टाइल्स लाइब्रेरी (रेडियम से अधिक) लगता है-हालांकि यह वास्तव में व्यक्तिगत प्राथमिकता का मामला है।

— छैनास्टिक

@alexrussell उफ़। गलती से जल्दी प्रस्तुत किया गया। अब मैं अपने घटकों को स्टाइल करने के लिए इस घटक तकनीक का उपयोग करता हूं। विचार बहुत सरल है। आप घटक है कि बजाय केवल, उन के साथ शैली और लिखें के आवेदन के साथ संबंध रहे हैं बनाने div, span, a, आदि यह अलग-थलग रहते हैं शैली जो पुस्तकालय आप उपयोग की परवाह किए बिना मदद मिलेगी। Reapatpatterns.com/#Style घटक

— चेटेस्टिक

Answer 2

React में शैली विशेषता मान को एक ऑब्जेक्ट होने की उम्मीद करती है, अर्थात की वैल्यू पेयर।

style = {}इसके अंदर एक और वस्तु होगी जो {float:'right'}इसे काम करना पसंद करती है।

<span style={{float:'right'}}>{'Download Audit'}</span>

आशा है कि इससे समस्या हल हो जाएगी

Comments

तो अगर मैं JS फाइल में css Classes का उपयोग करना चाहता हूं तो उसी के लिए मीडिया क्वेरी का उपयोग कैसे करें

— Pardeep Jain

@PardeepJain एक तरीका यह है कि इमोशन का उपयोग करने के लिए यहाँ एक पूर्ण व्याख्यान दिया गया है यदि आप मिलने में रुचि रखते हैं। जे एस शिखर सम्मेलन 2018

— ब्रूनो फिंगर

इस दृष्टिकोण का एक नकारात्मक पहलू यह है कि हर बार इनलाइन को परिभाषित करने वाली शैलियाँ एक नई वस्तु बनाती हैं। यह styleप्रोप में एक अंतर पैदा करता है जो प्रदर्शन के मुद्दों को जन्म दे सकता है। कम से कम, इस तरह की एक निरंतर शैली को अपने से बाहर परिभाषित करें render। उम्मीद है की यह मदद करेगा!

— डावसन बी

Answer 3

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

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

फेसबुक कर्मचारी और रिएक्ट योगदानकर्ता "वीजेक्स" की यह प्रस्तुति वास्तव में सहायक है - https://speakerdeck.com/vjeux/react-css-in-js

Comments

मैं इनलाइन शैलियों के साथ उत्तरदायी लेआउट बनाने के बारे में कैसे जाऊंगा? आपके पास यहाँ मीडिया प्रश्नों के लिए विकल्प नहीं है।

— ज़ीउस

आपको js की शक्ति मिलती है, js ब्राउज़र आकार को गतिशील रूप से शैलियों के निर्माण का पता लगा सकता है।

— जोर्डेव

@ g3mini कि एक सिफारिश की दृष्टिकोण अब नहीं है, वैसे भी, के बाद से वहाँ बहुत पसंद स्टाइल घटकों के लिए और अधिक शक्तिशाली समाधान कर रहे हैं CSS Modules, styled-componentsऔर अन्य।

— डेनियलोस

हालांकि js में css है =) हालांकि मैं इस समय के लिए CSS मॉड्यूल का उपयोग करना पसंद करता हूं।

— जोर्डेव्ड

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

— रिंगो

Answer 4

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

JS में शैलियाँ इस सीमा को लागू करती हैं कि अनुप्रयोग पुन: प्रयोज्य घटक के लिए कस्टम स्टाइल प्रदान नहीं कर सकता है। यह पूर्वोक्त स्थितियों में पूरी तरह से स्वीकार्य है, लेकिन तब नहीं जब आप दृश्य विशेषताओं को बदलते हैं, विशेष रूप से रंग।

Comments

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

— डेविड हेलसिंग

मैं अक्सर "घटक- {एप्लिकेशन} - {घटकनाम}" के प्रारूप में वर्ग नामों का उपयोग करता हूं। "स्वतंत्र अनुप्रयोग के लिए" "ऐप}" आवेदन का नाम या "आम" हो सकता है। जैसे टोडोलिस्ट के लिए "घटक-फू-टु-लिस्ट" और "घटक-सामान्य-प्रकाश-स्विच-टॉगल"। पैक किए गए घटकों के लिए {app} npm नाम होगा। यह है कि तुम क्या बात कर रहे हैं?

— ब्रिगैंड

हाँ, अच्छी तरह से नामकरण सम्मेलन एक बात है, लेकिन मुख्य बात यह होगी कि अलग-अलग सीएसएस नियमों को एक ही घटक जेएस फ़ाइल में जोड़ा जाए।

— डेविड हैवलिंग

यह सच नहीं है। घटकों पर प्रतिक्रिया करने के लिए आप निश्चित रूप से कस्टम स्टाइल लागू कर सकते हैं। घटक को बस ऊपर से सौंपी गई वस्तु के साथ अपनी स्वयं की शैली की वस्तु को मर्ज करने की आवश्यकता है, जो एप्लिकेशन डेटा से आ सकती है। के अंतिम स्लाइड देखें speakerdeck.com/vjeux/react-css-in-js नीचे उल्लेख की तरह

— Flion

यकीन है, अगर आप घटक एक एकल तत्व है, लेकिन <div><a>foo <b>bar</b></a><table>...</table></div>आप कैसे शैली है कि प्रॉप्स से देखते हैं? ध्यान रखें कि html संरचना एक कार्यान्वयन विवरण होनी चाहिए, अन्यथा आप बहुत से लाभ घटक प्रदान करते हैं।

— ब्रिगैंड

Answer 5

जेम्स के नेल्सन ने अपने पत्र "Why You shouldn't Style React Components with JavaScript" में कहा है कि वास्तव में इसके डाउन स्टाइल के साथ इनलाइन शैलियों का उपयोग करने की कोई आवश्यकता नहीं है। उनका कथन है कि कम / scss वाला पुराना बोरिंग css सबसे अच्छा समाधान है। सीएसएस के पक्ष में उनके शोध का हिस्सा:

• बाहरी रूप से विस्तार योग्य
• लीवरेबल (इनलाइन स्टाइल सब कुछ ओवरलैप करते हैं)
• डिजाइनर के अनुकूल

Answer 6

JSX में स्टाइलिंग HTML में स्टाइल के समान है।

HTML केस:

div शैली = "पृष्ठभूमि-रंग: लाल; रंग: सफेद"

JSX केस:

div style = {{backgroundColor: 'red', color: 'white'}}

Answer 7

मैं जो भी करता हूं, वह अपने पुन: प्रयोज्य घटक में से प्रत्येक को एक अद्वितीय कस्टम तत्व नाम देता है और फिर उस घटक के लिए एक सीएसएस फ़ाइल बनाता है, विशेष रूप से, उस घटक के लिए सभी स्टाइल विकल्पों के साथ (और केवल उस घटक के लिए)।

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

और फ़ाइल 'custom-Components.css' में, हर प्रविष्टि कस्टम-घटक टैग के साथ शुरू होगी:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

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

Comments

यह मेरा इसे करने का तरीका है। केवल नीचे की ओर यह है कि यह एक के बजाय दो फाइलें है। में इसके साथ जी सकता हूँ।

— सॉस

Answer 8

यह वास्तव में है पर निर्भर करता है कि कैसे बड़े अगर आप की तरह bundlers का उपयोग करना चाहते हैं, आपके आवेदन है webpack निर्माण में एक साथ और बंडल सीएसएस और जे एस और कैसे आप अपने आवेदन प्रवाह संघीय रूप से प्रबंधित करना चाहते हैं! दिन के अंत में, आपकी स्थिति पर निर्भर करता है, आप निर्णय ले सकते हैं!

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

हमेशा इस तरह से सोचें, यह सुनिश्चित करें कि चरण में वह सब कुछ है जहां उन्हें होना चाहिए, ठीक से नाम दिया गया है और अन्य डेवलपर्स के लिए चीजें ढूंढना आसान है ...

मैं व्यक्तिगत रूप से उन्हें मिलाता हूं, उदाहरण के लिए, मेरी आवश्यकता पर निर्भर करता है ... बाहरी सीएसएस का उपयोग करने का प्रयास करें, लेकिन यदि आवश्यक हो तो प्रतिक्रिया शैली को भी स्वीकार करेगी, आपको इसे मुख्य मूल्य के साथ एक वस्तु के रूप में पारित करने की आवश्यकता है, कुछ इस तरह से:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

Answer 9

यहाँ JSX सिंटैक्स में बूलियन आधारित स्टाइलिंग है :

style={{display: this.state.isShowing ? "inherit" : "none"}}

Answer 10

मेरे पास आमतौर पर प्रत्येक रिएक्ट घटक से जुड़ी scss फाइल होती है। लेकिन, मुझे यह तर्क दिखाई नहीं देता कि आप तर्क के साथ घटक को क्यों नहीं संक्षिप्त करेंगे और उसमें देखेंगे। मेरा मतलब है, आपके पास वेब घटकों के साथ समान है।

Answer 11

आपके कॉन्फ़िगरेशन इनलाइन स्टाइल के आधार पर आप हॉट रीलोड की पेशकश कर सकते हैं। हर बार शैली बदलने पर वेबपृष्ठ को तुरंत पुन: प्रदान किया जाता है। यह मुझे घटकों को जल्दी विकसित करने में मदद करता है। ऐसा कहने के बाद, मुझे यकीन है कि आप CSS + SCSS के लिए हॉट रीलोड वातावरण सेटअप कर सकते हैं।

Answer 12

आप इनलाइन शैलियों का उपयोग कर सकते हैं, लेकिन आपकी कुछ सीमाएँ होंगी यदि आप उन्हें अपने सभी स्टाइल में उपयोग कर रहे हैं, तो कुछ ज्ञात सीमाएँ हैं कि आप सीएसएस छद्म चयनकर्ताओं और मीडिया के प्रश्नों का उपयोग नहीं कर सकते ।

आप इसे हल करने के लिए रेडियम का उपयोग कर सकते हैं लेकिन फिर भी, मुझे लगता है कि यह परियोजना बोझिल होने वाली है।

मैं सीएसएस मॉड्यूल का उपयोग करने की सलाह दूंगा ।

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

इस पद्धति का एक फायदा यह है कि यह आपको विशिष्ट घटक को स्टाइलिंग कार्यक्षमता प्रदान करता है। यह अगले डेवलपर के लिए आपके प्रोजेक्ट पर काम करने के लिए बहुत अधिक बनाए रखने योग्य कोड और पठनीय प्रोजेक्ट आर्किटेक्चर बनाएगा।

Answer 13

कुछ घटकों के लिए, इनलाइन शैलियों का उपयोग करना आसान है। इसके अलावा, मुझे यह आसान और अधिक संक्षिप्त लगता है (जैसा कि मैं घटक शैलियों के लिए जावास्क्रिप्ट और सीएसएस का उपयोग नहीं कर रहा हूं)।

स्टैंड-अलोन घटकों के लिए, मैं 'स्प्रेड ऑपरेटर' या '...' का उपयोग करता हूं। मेरे लिए, यह स्पष्ट, सुंदर है, और एक तंग जगह में काम करता है। यहाँ थोड़ा लोडिंग एनीमेशन है जिसे मैंने यह दिखाने के लिए बनाया है कि यह लाभ है:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

EDIT NOVEMBER 2019

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

Answer 14

इनलाइन शैलियों के साथ समस्या सामग्री सुरक्षा नीतियां (CSP) अधिक आम होती जा रही हैं, जो इसकी अनुमति नहीं देती हैं। इसलिए, मैं इनलाइन शैलियों से पूरी तरह से बचने की सलाह देता हूं।

अद्यतन: आगे की व्याख्या करने के लिए, CSP सर्वर द्वारा भेजे गए HTTP हेडर हैं जो पेज पर दिखाई देने वाली सामग्री को प्रतिबंधित कर सकते हैं। यह बस एक और शमन है जो कि किसी हमलावर को कुछ शरारती करने से रोकने के लिए सर्वर पर लागू किया जा सकता है यदि डेवलपर साइट को खराब तरीके से कोड करता है।

इनमें से अधिकांश प्रतिबंधों का उद्देश्य XSS (क्रॉस-साइट स्क्रिप्टिंग) हमलों को रोकना है। XSS वह जगह है जहां एक हमलावर आपके पेज पर अपनी खुद की जावास्क्रिप्ट शामिल करने का एक तरीका बताता है (उदाहरण के लिए, यदि मैं अपना उपयोगकर्ता नाम बनाता हूं bob<SCRIPT>alert("hello")</SCRIPT>और फिर एक टिप्पणी पोस्ट करता हूं , और आप पृष्ठ पर जाते हैं, तो यह अलर्ट नहीं दिखाना चाहिए)। डेवलपर्स को साइट पर इस तरह से उपयोगकर्ता को जोड़ने की क्षमता से इनकार करना चाहिए, लेकिन अगर वे कोई गलती करते हैं, तो सीएसपी पृष्ठ को लोड करने से रोकता है, अगर यह कोई script>टैग पाता है ।

CSP डेवलपर्स के लिए सुरक्षा का एक अतिरिक्त स्तर है, यह सुनिश्चित करने के लिए कि अगर उन्होंने कोई गलती की है, तो एक हमलावर उस साइट पर आने वाले लोगों के लिए समस्या पैदा नहीं कर सकता।

ताकि सभी XSS हो, लेकिन क्या होगा अगर हमलावर <script>टैग शामिल नहीं कर सकता है लेकिन <style>टैग शामिल कर सकता है या टैग style=पर कोई पैरामीटर शामिल कर सकता है ? फिर वह इस तरह से साइट के रूप को बदलने में सक्षम हो सकता है कि आप गलत बटन, या किसी अन्य समस्या को क्लिक करने में धोखा खा गए हैं। यह बहुत कम चिंता का विषय है, लेकिन फिर भी कुछ बचने के लिए है, और सीएसपी आपके लिए ऐसा करता है।

CSP के लिए साइट के परीक्षण के लिए एक अच्छा संसाधन https://securityheaders.io/ है

आप CSP के बारे में और अधिक पढ़ सकते हैं: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Comments

क्या आप थोड़ा और समझा सकते हैं?

— दिमित्री मन्नानिकोव

आप विशेष रूप से unsafe-inlineनीति का उल्लेख कर रहे हैं । यह नीति एक शैली तत्व के प्रतिबंध को सक्षम करती है जो <style>किसी तत्व की शैली विशेषता पर लागू इनलाइन शैलियों को नहीं करती है <div style="">:। चूंकि ऊपर दिया गया प्रश्न शैली की विशेषता का उल्लेख कर रहा है, इसलिए यह पूरी तरह से इनलाइन शैलियों से बचने के लिए बुरी सलाह की तरह लगता है। इसके अलावा, reactसभी CSS को JS में स्थानांतरित करने की सलाह दे रहे हैं: github.com/reactjs/react-future/blob/master/04%20-%20Layout/…

— potench

@potench कि लिंक वास्तव में बहुत अच्छी थी, संभवतः अपने स्वयं के जवाब के योग्य थी

— eye_mew

दुर्भाग्य से, @eye_mew और @ सैम-राड - @potench का उत्तर सही नहीं है। CSP unsafe-inlineशैली विशेषता पर इनलाइन शैलियों के सभी रूपों को अक्षम करता है। आप जेएस (जैसे elem.style.color = 'blue';) के माध्यम से एक तत्व पर प्रोग्राम एपीआई का उपयोग कर सकते हैं, लेकिन आप स्टाइल एट्रिब्यूट को किसी एलीमेंट पर सेट नहीं कर सकते हैं (जैसे 'unsafe-inline'स्क्रिप्ट- src डायरेक्टिव इनलाइन स्क्रिप्ट टैग को बंद कर देता है, बल्कि onclickएट्रिब्यूट्स और फ्रेंड्स भी ।)

— एलेक्स सेक्सटन

CSP के संबंध में शैलियों को कैसे लागू किया जाए, इस बारे में फेसबुक टीम से अधिक जानकारी रिएक्ट v15 github.com/facebook/react/issues/5878 पर दी गई है । वर्थ ए रीड

— मार्क लुंडिन

Answer 15

एक सीएसएस फ़ाइल में अपनी शैली लिखने की तुलना में, रिएक्ट की शैली विशेषता के निम्नलिखित फायदे हैं :

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

हालाँकि, रिएक्ट की शैली विशेषता कुछ कमियों के साथ आती है - आप नहीं कर सकते

1. मीडिया के प्रश्नों का उपयोग नहीं कर सकते
2. छद्म चयनकर्ताओं का उपयोग नहीं कर सकते,
3. सीएसएस कक्षाओं की तुलना में कम संयोग।

जेएस में सीएसएस का उपयोग करके, आप उन कमियों के बिना स्टाइल टैग के सभी लाभ प्राप्त कर सकते हैं । आज तक, js-l पुस्तकालयों में कुछ लोकप्रिय अच्छी तरह से समर्थित css हैं, जिनमें शामिल हैं: Emotion, Styled-Components, और Radium। उन पुस्तकालयों को एचटीएमएल के लिए रिएक्ट किस तरह का है, इसे सीएसएस करना है। वे आपको अपने CSS लिखने और अपने JS कोड में अपने CSS को नियंत्रित करने की अनुमति देते हैं।

आइए तुलना करते हैं कि एक साधारण तत्व को स्टाइल करने के लिए हमारा कोड कैसा दिखेगा। हम "हेलो वर्ल्ड" div को स्टाइल करेंगे ताकि यह डेस्कटॉप पर बड़ा और मोबाइल पर छोटा दिखाई दे।

शैली विशेषता का उपयोग करना

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

चूंकि मीडिया क्वेरी एक शैली टैग में संभव नहीं है, इसलिए हमें तत्व में एक क्लासनेम जोड़ना होगा और एक सीएसएस नियम जोड़ना होगा।

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

इमोशन के 10 सीएसएस टैग का उपयोग करना

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

भावना टेम्पलेट स्ट्रिंग के साथ-साथ स्टाइल वाले घटकों का भी समर्थन करती है। यदि आप चाहें तो लिख सकते हैं:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

"जेएस में सीएसएस" हुड्स के पीछे सीएसएस कक्षाओं का उपयोग करता है। भावना विशेष रूप से प्रदर्शन को ध्यान में रखकर बनाई गई थी, और कैशिंग का उपयोग करता है। जेएस में रिएक्ट शैली की विशेषताओं की तुलना में सीएसएस बेहतर प्रदर्शन प्रदान करेगा।

सर्वोत्तम प्रथाएं

यहाँ कुछ सर्वोत्तम प्रथाएँ दी गई हैं:

1. यदि आप अपने तत्वों को इनलाइन या अपने JS में स्टाइल करना चाहते हैं, तो एक css-in-js लाइब्रेरी का उपयोग करें, एक शैली विशेषता का उपयोग न करें।

क्या मुझे इस तरह से सभी स्टाइल करने का लक्ष्य रखना चाहिए, और मेरी सीएसएस फ़ाइल में कोई भी शैली निर्दिष्ट नहीं है?

2. यदि आप सीएसएस-इन-जेएस समाधान का उपयोग करते हैं तो सीएसएस फाइलों में शैलियों को लिखने की कोई आवश्यकता नहीं है। जेएस में अपने सीएसएस को लिखना बेहतर है क्योंकि आप जेएस द्वारा प्रदान किए गए सभी उपकरणों को एक प्रोग्रामिंग भाषा का उपयोग कर सकते हैं।

क्या मुझे इनलाइन शैलियों से पूरी तरह बचना चाहिए?

3. जेएस में अपनी शैली कोड को संरचित करना आपके कोड को सामान्य रूप से संरचित करने के समान है। उदाहरण के लिए:
   • दोहराई जाने वाली शैलियों को पहचानें और उन्हें एक स्थान पर लिखें। इमोशन में ऐसा करने के दो तरीके हैं:

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• रिएक्ट कोडिंग पैटर्न एनकैप्सुलेटेड घटकों का है - HTML और JS जो एक घटक को नियंत्रित करता है, एक फाइल में लिखा गया है। यह वह जगह है जहां आपका सीएसएस / शैली कोड उस घटक को शैली के लिए है।

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

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

Answer 16

आप StrCSS का भी उपयोग कर सकते हैं, यह अलग वर्ग के नाम और बहुत कुछ बनाता है! उदाहरण कोड की तरह दिखेगा। आप (वैकल्पिक) सिंटैक्स हाइलाइटिंग समर्थन के लिए विजुअल स्टूडियो मार्केटप्लेस से VSCode एक्सटेंशन स्थापित कर सकते हैं!

स्रोत: strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

Answer 17

कुछ समय हमें एक घटक से कुछ तत्व को स्टाइल करने की आवश्यकता होती है, लेकिन अगर हमें उस घटक को केवल प्रदर्शित करना है या शैली इतनी कम है तो सीएसएस वर्ग का उपयोग करने के बजाय हम प्रतिक्रिया जेएस में इनलाइन शैली के लिए जाते हैं। Reajjs इनलाइन शैली HTML इनलाइन शैली के समान है बस संपत्ति के नाम थोड़ा अलग हैं

शैली का उपयोग करके किसी भी टैग में अपनी शैली लिखें = {{प्रोप: "मूल्य"}}

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

Comments

क्या आप कृपया इस बारे में कुछ और जानकारी जोड़ सकते हैं कि यह कोड ओपी के प्रश्न का उत्तर कैसे और क्यों प्रदान करता है? धन्यवाद!

— deHaar

Answer 18

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

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

• भावना जो दूसरों के बीच स्टाइल-घटकों से "प्रेरित" है, js में शैलियों का उपयोग करती है और फ्रेम एग्नोस्टिक हो सकती है, लेकिन निश्चित रूप से इसके रिएक्ट लाइब्रेरी को बढ़ावा देती है। भावना को इस पद पर आज तक रखा गया है।
• स्टाइल-कलपुर्जे तुलनीय हैं और भावना के रूप में एक ही जैसी कई सुविधाएँ प्रदान करते हैं। साथ ही सक्रियता से बनाए रखा जा रहा है। भावना और स्टाइल-दोनों घटकों में समान सिंटैक्स होता है। यह विशेष रूप से प्रतिक्रिया घटकों के साथ काम करने के लिए बनाया गया है।
• JSS फिर भी js में शैलियों के लिए एक और विकल्प है जो फ्रेमवर्क एग्नॉस्टिक है, हालांकि इसमें कई फ्रेमवर्क पैकेज हैं, उनके लिए रिएक्ट-जेएसएस।

Answer 19

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