প্রতিক্রিয়া .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>;
  }
});

আমার কি এইভাবে সমস্ত স্টাইলিং করার লক্ষ্য করা উচিত, এবং আমার সিএসএস ফাইলে নির্দিষ্ট কোনও স্টাইল নেই?

অথবা আমার সম্পূর্ণভাবে ইনলাইন স্টাইলগুলি এড়ানো উচিত?

দুটোকেই কিছুটা করা অদ্ভুত এবং অগোছালো বলে মনে হচ্ছে - টুইটের স্টাইলিং করার সময় দুটি জায়গায় পরীক্ষা করা দরকার be

Comments

আপনি যখন আপনার পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করছেন তখন আপনার ইনলাইন স্টাইলগুলি সংগঠিত করতে এবং এগুলিকে সহজেই অনুকূলিতকরণযোগ্য করতে আপনি রিঅ্যাক্ট-থিম ব্যবহার করতে পারেন । এটি ম্যাটেরিয়াল-ইউআই তে থিম ম্যানেজারের মতো কাজ করে ।

— মন্ত্রমন্ত্রমন্ত্র

Github.com/css-modules/css-modules ব্যবহার বিবেচনা করুন । github.com/gajus/react-css-modules একটি প্রতিক্রিয়া বাস্তবায়ন (যে আমি এর লেখক)। সিএসএস মডিউল এবং প্রতিক্রিয়া সিএসএস মডিউলগুলি স্বয়ংক্রিয়ভাবে আপনার উপাদান শ্রেণীর নামগুলি সিএসএস মডিউলগুলিতে ম্যাপ করে যা ডকুমেন্টের সুযোগে একটি অনন্য নাম বরাদ্দ করা হয়েছে।

— গজুস

মিডিয়া প্রশ্ন লিখতে গিয়ে আমি সিএসএস ব্যবহার করি। আমি বুটস্ট্র্যাপের মতো বেস সিএসএস লাইব্রেরি থেকে ক্লাসও ব্যবহার করি।

— বিজয়স্ট

স্টাইল অ্যাট্রিবিউটকে স্টাইলিং উপাদানগুলির প্রাথমিক উপায় হিসাবে ব্যবহার করার পরামর্শ দেওয়া হয় না। ( reactjs.org/docs/dom-elements.html#style )

— ওমিড ইব্রাহিমি

আজকের হিসাবে, আমি একটি সিএসএস-ইন-জেএস সমাধান ব্যবহার করার পরামর্শ দিচ্ছি। এতে শৈলীর বৈশিষ্ট্যের সমস্ত সুবিধা রয়েছে, ত্রুটিগুলি ছাড়াই। আমি একটি উত্তর লিখেছিলাম স্ট্যাকওভারফ্লো.com

— বেন কার্প

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) এবং মিডিয়া-কোয়েরিগুলি কাঁচা প্রতিক্রিয়াতে বেদনাদায়ক are

আমি রেডিয়াম পছন্দ করি কারণ এই শক্ত অংশগুলির জন্য সিনট্যাক্সটি 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>
  }
});

আরও পর্যবেক্ষণ

এই বছরের শুরুতে ইউরোপে প্রতিক্রিয়া: এগুলি আরও বিস্তারিতভাবে আলোচনা করেছি: ইনলাইন স্টাইলগুলি এবং যখন 'কেবল CSS ব্যবহার করা' ভাল ।

আপনি পথে নতুন আবিষ্কার করার সময় সাহায্য করতে পেরে আমি আনন্দিত :) আমাকে হিট করুন -> @ ক্যান্তাস্টিক

Comments

দুর্দান্ত পড়া। আপনার দ্বারা এই প্রাসঙ্গিক কথাটির সত্যই প্রশংসা করেছেন, @ ক্যান্তাস্টিক। # স্বীকৃত

— চক্ষু_আম্মু

"আপনার উপাদানগুলি বিন্যাসের উপাদানগুলির সাথে মোড়ক করুন": এতটাই স্পষ্ট, তবে ঠিক আমার যা প্রয়োজন ছিল।

— tandrewnichol

@ ক্যান্তাস্টিক দুর্দান্ত উত্তর। এক বছর পরে, এখনও কি সব সত্য? কেবলমাত্র প্রতিক্রিয়া এবং ইনলাইন স্টাইলিংয়ের ধারণাটি পাওয়া যায় এবং আপনি এই উত্তরটি পোস্ট করার পরে কিছু পরিবর্তন হয়েছে কিনা তা অবাক করেই ভাবেন।

— অ্যালেক্সারসেল

@ আলেক্সরসেল ধন্যবাদ! আমি মনে করি যে এখানে উত্তরটি এখনও বেশ ভালভাবে ধরে আছে। যে একটি অঞ্চল পরিবর্তিত হয়েছে তা হ'ল এফ্রোডাইট মনে হয় সম্প্রদায়-পছন্দসই ইনলাইন-স্টাইল লাইব্রেরি (রেডিয়ামের ওপরে) - যদিও এটি সত্যই ব্যক্তিগত পছন্দ হিসাবে বিবেচিত।

— চমত্কার

@alexrussell ওফ। দুর্ঘটনাক্রমে তাড়াতাড়ি জমা দেওয়া। আমি এখন আমাদের উপাদানগুলি শৈল করার জন্য আমাদের এই উপাদানটি কৌশল। ধারণা বেশ সহজ. আপনি উপাদান যে শুধুমাত্র পরিবর্তে, যারা সঙ্গে শৈলী এবং রচনা প্রয়োগের সঙ্গে সংশ্লিষ্ট তৈরি div, span, a, ইত্যাদিতে বিচ্ছিন্ন রাখা শৈলী যেখানে গ্রন্থাগার আপনি ব্যবহার নির্বিশেষে সাহায্য করবে। রিঅ্যাক্ট প্যাটার্নস.com/ # স্টাইল উপাদান

— সান্টেস্টিক

Answer 2

প্রতিক্রিয়াটির শৈলীর বৈশিষ্ট্যটি মানটিকে একটি বস্তুর কাছে প্রত্যাশা করে, অর্থাৎ কী মান জোড়।

style = {}{float:'right'}এটির কাজ করার মতো এটির ভিতরে আরও একটি জিনিস থাকবে ।

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

আশা করি এটি সমস্যার সমাধান করে দেয়

Comments

যদি আমি জেএস ফাইলে সিএসএস ক্লাস ব্যবহার করতে চাই তবে মিডিয়া ক্যোয়ারি কীভাবে ব্যবহার করতে হয়

— পারদীপ জৈন

@PardeepJain ওয়ান ওয়ে ব্যবহার করা আবেগ এখানে এটি একটি পূর্ণ বক্তৃতা যদি আপনার কাছ থেকে আগ্রহ দেখিয়েছেন হয় meet.js শিখর 2018

— ব্রুনো ফিঙ্গার

এই পদ্ধতির একটি খারাপ দিক হ'ল শৈলীর ইনলাইন সংজ্ঞায়িত করা প্রতিটি সময় একটি নতুন অবজেক্ট তৈরি করে। এটি প্রোপটিতে একটি ভিন্নতা তৈরি করে styleযা পারফরম্যান্সের সমস্যার সমাধান করতে পারে। কমপক্ষে, আপনার বাইরের মতো ধ্রুবক স্টাইলটি সংজ্ঞায়িত করুন render। আশাকরি এটা সাহায্য করবে!

— ডসন বি

Answer 3

আমি আমার প্রতিক্রিয়া উপাদানগুলির মধ্যে ব্যাপকভাবে ইনলাইন শৈলীগুলি ব্যবহার করি। উপাদানগুলির মধ্যে শৈলীগুলি সংগ্রহ করতে আমি এটিকে আরও স্পষ্ট মনে করি কারণ উপাদানটি কী স্টাইলগুলি দেয় এবং কী না তা সর্বদা পরিষ্কার clear প্লাস হাতে জাভাস্ক্রিপ্ট সম্পূর্ণ ক্ষমতা সত্যিই আরও জটিল স্টাইলিং প্রয়োজনীয়তা সহজ করে তোলে।

আমি প্রথমে নিশ্চিত হইনি তবে বেশ কয়েক মাস ধরে এটি ছিনিয়ে নেওয়ার পরে আমি পুরোপুরি রূপান্তরিত হয়ে আমার সমস্ত সিএসএসকে ইনলাইন বা অন্য জেএস-চালিত সিএসএস পদ্ধতিতে রূপান্তর করার প্রক্রিয়াধীন।

ফেসবুক কর্মচারী এবং প্রতিক্রিয়ার অবদানকারী "vjeux" এর এই উপস্থাপনাটিও সত্যই সহায়ক - https://speakerdeck.com/vjeux/react-css-in-js

Comments

আমি কীভাবে ইনলাইন শৈলীর সাথে প্রতিক্রিয়াশীল লেআউট তৈরি করতে যাব? আপনার কাছে এখানে মিডিয়া প্রশ্নের জন্য বিকল্প নেই।

— জিউস

আপনি জেএস এর শক্তি পান, জেএসগুলি গতিশীলভাবে শৈলীগুলি তৈরি করতে ব্রাউজারের আকারগুলি সনাক্ত করতে পারে।

— জর্ডিভিডি

@ g3mini করে একটি প্রস্তাবিত পদ্ধতির এখন নয়, কোন পথে, যেহেতু অনেক মত styling উপাদান জন্য অধিক শক্তিশালী সমাধান আছে CSS Modules, styled-componentsএবং অন্যদের।

— Denialos

জেএসএসেও সিএসএস রয়েছে =) আমি যদিও এই মুহুর্তে সিএসএস মডিউলগুলি ব্যবহার করতে পছন্দ করি।

— জর্ডিভিডি

একটি জিনিস যা এখানে বিবেচনা করা হয় না তা হ'ল একই SASS ফাইলে পিতা বা মাতা ও শিশু শৈলীগুলি দেখতে খুব সহজ, অন্যদিকে যদি আপনাকে বিভিন্ন উপাদানগুলির নিয়মগুলি দেখার প্রয়োজন হয় তবে আপনাকে প্রচুর ফাইল খোলার এবং বন্ধ করতে হতে পারে।

— রিঙ্গো

Answer 4

স্টাইল বৈশিষ্ট্যের মূল উদ্দেশ্যটি গতিশীল, রাজ্য ভিত্তিক শৈলীর জন্য। উদাহরণস্বরূপ, আপনার কোনও রাজ্যের উপর ভিত্তি করে অগ্রগতি বারে বা অন্য কোনও কিছুর উপর ভিত্তি করে অবস্থান বা দৃশ্যমানতার প্রস্থের স্টাইল থাকতে পারে।

জেএস-এর স্টাইলগুলি সীমাবদ্ধতা আরোপ করে যে অ্যাপ্লিকেশনটি পুনরায় ব্যবহারযোগ্য উপাদানগুলির জন্য কাস্টম স্টাইলিং সরবরাহ করতে পারে না। পূর্বোক্ত পরিস্থিতিতে এটি পুরোপুরি গ্রহণযোগ্য, তবে আপনি দৃশ্যমান বৈশিষ্ট্যগুলি বিশেষত রঙ পরিবর্তন করার সময় নয়।

Comments

একটি সম্পর্কিত ধারণা আমাদের কাছে কিছু সময়ের জন্য ছিল গল্প এবং কম ব্যবহার করে প্রতিক্রিয়া উপাদানটির জন্য নির্দিষ্ট সিএসএসের নিয়মগুলি আলাদা করার ক্ষমতা। প্রতিটি উপাদানগুলির জন্য নির্দিষ্ট শ্রেণীর নাম নির্ধারণ করার মতো উপাদান, তারপরে উপাদান ফাইলের অভ্যন্তরে সেই শ্রেণীর জন্য নির্দিষ্ট সিএসএস যুক্ত করুন। এটি অনেক অর্থবহ করে তুলবে।

— ডেভিড হেলসিং

আমি প্রায়শই "উপাদান- {অ্যাপ্লিকেশন} - {উপাদান নাম}" ফর্ম্যাটে ক্লাসের নামগুলি ব্যবহার করি। "{অ্যাপ।" অ্যাপ্লিকেশনটির নাম বা অ্যাপ্লিকেশন স্বতন্ত্র উপাদানগুলির জন্য "সাধারণ" হতে পারে। যেমন টোডলিস্টের জন্য "উপাদান-ফু-টু-তালিকা" এবং "উপাদান-সাধারণ-লাইট-স্যুইচ-টগল"। প্যাকেজযুক্ত উপাদানগুলির জন্য {অ্যাপ্লিকেশন the এনপিএম নাম হবে। আপনি কি উল্লেখ করছেন?

— ব্রিগেন্ড

হ্যাঁ, নামকরণের কনভেনশনটি একটি জিনিস তবে মূল বিষয়টি হ'ল বিচ্ছিন্ন সিএসএস নিয়মগুলি একই উপাদান জেএস ফাইলগুলিতে যুক্ত করা।

— ডেভিড হেলসিং

এটি সত্য নয়। উপাদানগুলি প্রতিক্রিয়া জানাতে আপনি অবশ্যই কাস্টম স্টাইলিং প্রয়োগ করতে পারেন। উপাদানটি কেবল তার নিজস্ব স্টাইল অবজেক্টটি উপরের হাত থেকে কোনও বস্তুর সাথে মার্জ করা দরকার যা অ্যাপ্লিকেশন ডেটা থেকে আসতে পারে। নীচে উল্লিখিত মত স্পিকারডেক . com / vjeux / react - css - in - js এর শেষ স্লাইডগুলি দেখুন

— ফ্লিয়ন

অবশ্যই, আপনি যদি উপাদানটি একটি একক উপাদান হন তবে প্রদত্ত <div><a>foo <b>bar</b></a><table>...</table></div>প্রপস থেকে আপনি কী স্টাইল করেন? মনে রাখবেন যে এইচটিএমএল কাঠামোটি একটি বাস্তবায়নের বিশদ থাকা উচিত, অন্যথায় আপনি যে উপকারের সুবিধাগুলি সরবরাহ করে তা হারাবেন।

— ব্রিগেন্ড

Answer 5

জেমস কে নেলসন তাঁর চিঠিতে "কেন আপনি স্টাইল না করা উচিত জাভাস্ক্রিপ্টের সাথে উপাদানগুলির প্রতিক্রিয়া জানান" তার ডাউনসাইডগুলির সাথে ইনলাইন স্টাইলগুলি ব্যবহার করার আসলে কোনও প্রয়োজন নেই। তাঁর বক্তব্যটি হ'ল কম / এসএসএস সহ পুরানো বোরিং সিএসএসই সেরা সমাধান। সিএসএসের পক্ষে তাঁর থিসিসের অংশ:

• বাহ্যিকভাবে প্রসারিত
• শুল্কযোগ্য (ইনলাইন শৈলীগুলি সমস্ত কিছুকে ছাড়িয়ে যায়)
• ডিজাইনার বান্ধব

Answer 6

জেএসএক্সের স্টাইলিং এইচটিএমএল স্টাইলিংয়ের সাথে খুব মিল।

এইচটিএমএল কেস:

ডিভ স্টাইল = "ব্যাকগ্রাউন্ড-রঙ: লাল; রঙ: সাদা"

জেএসএক্স কেস:

ডিভ স্টাইল = {{পটভূমি রঙ: 'লাল', রঙ: 'সাদা'}

Answer 7

আমি যা করি তা হ'ল আমার প্রত্যেকে পুনঃব্যবহারযোগ্য উপাদানটিকে একটি অনন্য কাস্টম উপাদান নাম দিন এবং তারপরে component উপাদানটির জন্য সমস্ত স্টাইলিং বিকল্প সহ (এবং কেবলমাত্র সেই উপাদানটির জন্য) বিশেষ করে সেই উপাদানটির জন্য একটি সিএসএস ফাইল তৈরি করুন।

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

এবং ফাইল 'কাস্টম-উপাদান.কম' এ, প্রতিটি প্রবেশ কাস্টম-উপাদান ট্যাগ দিয়ে শুরু হবে:

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

এর অর্থ আপনি উদ্বেগকে পৃথক করার সমালোচনা ধারণাটি ছেড়ে দিচ্ছেন না। বনাম শৈলী দেখুন। আপনি যদি নিজের উপাদানটি ভাগ করেন, তবে অন্যদের জন্য এটির বাকী ওয়েব পৃষ্ঠার সাথে মিলিয়ে থিম করা সহজ।

Comments

এইভাবেই আমি এটি করি। একমাত্র নীচের দিকটি হ'ল এটির পরিবর্তে দুটি ফাইল। আমি এটার সাথে বাঁচতে পারি।

— সস

Answer 8

এটি আসলে কীভাবে তার উপর নির্ভর করে আপনার অ্যাপ্লিকেশনটি বড় , যদি আপনি ওয়েবপ্যাক এবং বান্ডেল সিএসএস এবং জেএসকে একসাথে বিল্ডে ব্যবহার করতে চান এবং কীভাবে আপনি আপনার অ্যাপ্লিকেশন প্রবাহ পরিচালনা করতে চান! দিনের শেষে, আপনার পরিস্থিতির উপর নির্ভর করে, আপনি সিদ্ধান্ত নিতে পারেন!

বড় প্রকল্পগুলিতে ফাইলগুলি সংগঠিত করার জন্য আমার পছন্দটি সিএসএস এবং জেএস ফাইলগুলিকে পৃথক করছে , ভাগ করে নেওয়া সহজ হতে পারে, ইউআই লোকের পক্ষে কেবল সিএসএস ফাইলের মধ্য দিয়ে যাওয়া সহজ, পুরো অ্যাপ্লিকেশনের জন্য আরও অনেক সুন্দর ফাইলের আয়োজন!

সর্বদা এইভাবে চিন্তা করুন, পর্যায়ে সবকিছু ঠিকঠাক যেখানে হওয়া উচিত, যথাযথভাবে নামকরণ করা উচিত এবং অন্য বিকাশকারীদের পক্ষে জিনিসগুলি সন্ধান করা সহজ হওয়া নিশ্চিত করুন ...

আমি ব্যক্তিগতভাবে সেগুলি আমার প্রয়োজনের উপর নির্ভর করে, উদাহরণস্বরূপ ... বাহ্যিক CSS ব্যবহার করার চেষ্টা করুন, তবে প্রয়োজন হলে প্রতিক্রিয়া শৈলীও গ্রহণ করবে, আপনাকে নীচের মতো এই জাতীয় মান সহ একটি বস্তু হিসাবে এটি পাস করতে হবে:

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

এখানে জেএসএক্স সিনট্যাক্সে বুলিয়ান ভিত্তিক স্টাইলিং রয়েছে :

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

Answer 10

আমি সাধারণত প্রতিটি প্রতিক্রিয়া উপাদান সঙ্গে scss ফাইল যুক্ত। তবে, আমি যুক্তিটি সহ কেন উপাদানটি সজ্জিত করে তাতে সন্ধান করবে না তার কারণ আমি দেখতে পাচ্ছি না। মানে, ওয়েব উপাদানগুলির সাথে আপনার একই জিনিস রয়েছে।

Answer 11

আপনার কনফিগারেশন উপর নির্ভর করে ইনলাইন স্টাইলিং আপনাকে হট পুনরায় লোড দিতে পারে। ওয়েবপৃষ্ঠাটি তত্ক্ষণাত শৈলীর পরিবর্তনের সাথে সাথে পুনরায় রেন্ডার করা হবে। এটি আমাকে উপাদানগুলি আরও দ্রুত বিকাশে সহায়তা করে। এটি বলার পরে, আমি নিশ্চিত যে আপনি সিএসএস + এসএসএসএসের জন্য একটি হট রিলোডলোড পরিবেশ সেটআপ করতে পারবেন।

Answer 12

আপনি ইনলাইন স্টাইল ব্যবহার করতে পারেন তবে আপনি যদি আপনার সমস্ত স্টাইলিংগুলিতে সেগুলি ব্যবহার করেন তবে আপনার কিছু সীমাবদ্ধতা থাকবে, কিছু সীমাবদ্ধতা হ'ল আপনি সেখানে সিএসএস সিউডো নির্বাচক এবং মিডিয়া কোয়েরি ব্যবহার করতে পারবেন না ।

এটি সমাধান করার জন্য আপনি রেডিয়াম ব্যবহার করতে পারেন তবে তবুও আমার মনে হয় প্রকল্পটি আরও জটিল হয়ে উঠবে।

আমি সিএসএস মডিউল ব্যবহার করার পরামর্শ দেব ।

সিএসএস মডিউলগুলি ব্যবহার করে আপনার সিএসএস ফাইলে সিএসএস লেখার স্বাধীনতা থাকবে এবং নামকরণের সংঘাতের বিষয়ে চিন্তা করতে হবে না, এটি সিএসএস মডিউলগুলির দ্বারা যত্ন নেওয়া হবে।

এই পদ্ধতির একটি সুবিধা হ'ল এটি আপনাকে নির্দিষ্ট উপাদানগুলিতে স্টাইলিং কার্যকারিতা দেয়। এটি পরবর্তী বিকাশকারীকে আপনার প্রকল্পে কাজ করার জন্য আরও অনেক রক্ষণাবেক্ষণযোগ্য কোড এবং পঠনযোগ্য প্রকল্প আর্কিটেকচার তৈরি করবে।

Answer 13

কিছু উপাদানগুলির জন্য, ইনলাইন স্টাইলগুলি ব্যবহার করা সহজ। এছাড়াও, আমি উপাদান শৈলীর প্রাণবন্ত করতে আরও সহজ এবং আরও সংক্ষিপ্ত (যেমন আমি জাভাস্ক্রিপ্ট ব্যবহার করছি এবং সিএসএস নয়) find

একা থাকা উপাদানগুলির জন্য, আমি 'স্প্রেড অপারেটর' বা '...' ব্যবহার করি। আমার জন্য, এটি স্পষ্ট, সুন্দর, এবং একটি দৃ in় জায়গায় কাজ করে। এটির সুবিধাগুলি দেখানোর জন্য আমি এখানে কিছু লোডিং অ্যানিমেশন দিচ্ছি:

<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
  }
}

নভেম্বর 2019 এডিট করুন

শিল্পে কাজ করা (একটি ফরচুন 500 সংস্থা), আমাকে কোনও ইনলাইন স্টাইলিং করার অনুমতি নেই। আমাদের দলে, আমরা সিদ্ধান্ত নিয়েছি যে ইনলাইন স্টাইলটি অপঠনযোগ্য এবং রক্ষণাবেক্ষণযোগ্য নয়। এবং, প্রথম হাতে দেখার পরে কীভাবে ইনলাইন শৈলীগুলি কোনও অ্যাপ্লিকেশনটিকে সম্পূর্ণ অসহনীয় করে তোলে, আমাকে সম্মত হতে হবে। আমি সম্পূর্ণভাবে ইনলাইন শৈলী নিরুৎসাহিত করি।

Answer 14

ইনলাইন শৈলীতে সমস্যা হ'ল বিষয়বস্তু সুরক্ষা নীতিগুলি (সিএসপি) আরও সাধারণ হয়ে উঠছে, যা এটির অনুমতি দেয় না। অতএব, আমি সম্পূর্ণভাবে ইনলাইন শৈলীগুলি এড়ানো পরামর্শ দিই।

আপডেট: আরও ব্যাখ্যা করতে, সিএসপি হ'ল সার্ভারের দ্বারা প্রেরিত HTTP শিরোনাম যা পৃষ্ঠায় কোন সামগ্রী প্রদর্শিত হতে পারে তা সীমাবদ্ধ করে। এটি কেবলমাত্র আরও একটি প্রশমন যা কোনও আক্রমণকারীকে দুষ্টু কিছু করা থেকে বিরত রাখতে কোনও সার্ভারে প্রয়োগ করা যেতে পারে যদি ডেভলপাররা সাইটটিকে দুর্বলভাবে কোড করে।

এর মধ্যে বেশিরভাগ বিধিনিষেধের উদ্দেশ্য হ'ল এক্সএসএস (ক্রস-সাইট স্ক্রিপ্টিং) আক্রমণ বন্ধ করা। এক্সএসএস যেখানে একটি আক্রমণকারী আপনার নিজের জাভাস্ক্রিপ্টটি আপনার পৃষ্ঠায় অন্তর্ভুক্ত করার উপায় খুঁজে বের করে (উদাহরণস্বরূপ, যদি আমি আমার ব্যবহারকারীর নামটি তৈরি করি bob<SCRIPT>alert("hello")</SCRIPT>এবং তারপরে একটি মন্তব্য পোস্ট করি এবং আপনি পৃষ্ঠাটিতে যান, এটি কোনও সতর্কতা প্রদর্শন করা উচিত নয়)। বিকাশকারীদের সাইটের মতো এই জাতীয় সামগ্রী যুক্ত করার ক্ষমতা অস্বীকার করা উচিত, তবে তারা যদি কোনও ভুল করে থাকে তবে সিএসপি যদি কোনও script>ট্যাগ খুঁজে পায় তবে পৃষ্ঠাটি লোড করা থেকে বাধা দেয় ।

সিএসপি হ'ল ডেভেলপারদের কোনও ভুল হয়েছে কিনা তা নিশ্চিত করার জন্য এটি কেবলমাত্র অতিরিক্ত স্তরের সুরক্ষা, যাতে কোনও আক্রমণকারী সেই সাইটে দর্শকদের সমস্যা তৈরি করতে পারে না।

যাতে সমস্ত এক্সএসএস হয় তবে আক্রমণকারী যদি <script>ট্যাগগুলি অন্তর্ভুক্ত না করতে পারে তবে <style>ট্যাগ অন্তর্ভুক্ত করতে পারে বা একটি অন্তর্ভুক্ত করতে পারে whatstyle= কোনও ট্যাগে পরামিতি ? তারপরে সে সাইটের চেহারাটি এমনভাবে পরিবর্তন করতে সক্ষম হতে পারে যাতে আপনি ভুল বোতামটি ক্লিক করতে বা অন্য কোনও সমস্যাতে প্রতারিত হন। এটি উদ্বেগের তুলনায় অনেক কম, তবে এখনও এড়াতে হবে এবং সিএসপি আপনার পক্ষে তা করে।

সিএসপির জন্য কোনও সাইটের পরীক্ষার জন্য একটি ভাল উত্স হ'ল https://securityheaders.io/

আপনি সিএসপি সম্পর্কে আরও পড়তে পারেন: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Comments

আপনি কি আরও একটু ব্যাখ্যা করতে পারেন?

— দিমিত্রি মান্নানিকভ

আপনি unsafe-inlineনীতিটি বিশেষভাবে উল্লেখ করছেন । এই নীতিটি একটি শৈলী উপাদান সীমাবদ্ধতা সক্ষম <style>একটি উপাদান এর শৈলী বৈশিষ্ট্য প্রয়োগ ইনলাইন শৈলী না: <div style="">। যেহেতু উপরের প্রশ্নটি শৈলীর বৈশিষ্ট্য উল্লেখ করছে, তাই সম্পূর্ণভাবে ইনলাইন স্টাইলগুলি এড়াতে খারাপ পরামর্শ বলে মনে হচ্ছে। এছাড়াও, reactসমস্ত সিএসএসকে জেএসে

— পটেনচ

@ পোটেনচ এই লিঙ্কটি সত্যিই দুর্দান্ত ছিল, সম্ভবত এটির নিজের জবাবের জন্য উপযুক্ত

— চক্ষু_মাংস

দুর্ভাগ্যক্রমে, @eye_mew এবং @ স্যাম-রেড - @ পোটেনচের উত্তর সঠিক নয়। সিএসপি unsafe-inlineশৈলীর বৈশিষ্ট্য সহ সমস্ত ধরণের ইনলাইন স্টাইল অক্ষম করে। আপনি জেএস (উদাহরণস্বরূপ elem.style.color = 'blue';) এর মাধ্যমে কোনও উপাদানটিতে স্টাইল এপিআইগুলি ব্যবহার করতে পারেন, তবে আপনি কোনও উপাদানের উপর স্টাইলের বৈশিষ্ট্যটি সেট করতে পারবেন না (ঠিক যেমন 'unsafe-inline'স্ক্রিপ্ট-এসসিআর ডিরেক্টরিতে ইনলাইন স্ক্রিপ্ট ট্যাগগুলি নিষ্ক্রিয় করে তবে onclickবৈশিষ্ট্যগুলি এবং বন্ধুরাও না।)

— অ্যালেক্স সেক্সটন 17

প্রতিক্রিয়া v15 github.com/facebook/react/issues/5878 এ কীভাবে সিএসপি সম্পর্কিত স্টাইলগুলি প্রয়োগ করা হয় সে সম্পর্কে ফেসবুক দল থেকে আরও তথ্য রয়েছে । একটি পাঠ্য মূল্যবান

— মার্ক লন্ডিন

Answer 15

সিএসএস ফাইলে আপনার স্টাইলগুলি লেখার সাথে তুলনা করে, প্রতিক্রিয়াটির স্টাইল অ্যাট্রিবিউটটির নিম্নলিখিত সুবিধা রয়েছে :

1. প্রোগ্রামিং ভাষা হিসাবে সরঞ্জামগুলির জাভাস্ক্রিপ্ট ব্যবহার করার ক্ষমতা আপনার উপাদানগুলির শৈলী নিয়ন্ত্রণ করতে সরবরাহ করে। এর মধ্যে চলকগুলি এম্বেডিং, শর্তাদি ব্যবহার করে এবং শৈলীর কোনও উপাদানতে স্টাইলগুলি অন্তর্ভুক্ত থাকে।
2. একটি "কম্পোনেন্টাল" পদ্ধতির। এই উপাদানটির জন্য এইচটিএমএল, জেএস, এবং সিএসএস কোডের আর কোনও বিভাজন লেখা নেই। উপাদানগুলির কোডটি একীভূত হয় এবং এক জায়গায় লেখা হয়।

তবে, প্রতিক্রিয়াটির স্টাইলের বৈশিষ্ট্যটি কয়েকটি ত্রুটিগুলি নিয়ে আসে - আপনি পারবেন না

1. মিডিয়া ক্যোয়ারী ব্যবহার করতে পারবেন না
2. সিউডো নির্বাচক ব্যবহার করতে পারবেন না,
3. সিএসএস ক্লাসের তুলনায় কম কার্যকর ient

জেএসে সিএসএস ব্যবহার করে, আপনি কোনও ত্রুটি ছাড়াই স্টাইল ট্যাগের সমস্ত সুবিধা পেতে পারেন । আজকাল জেএস-লাইব্রেরিতে কয়েকটি জনপ্রিয় ভাল সমর্থিত সিএসএস রয়েছে, যার মধ্যে রয়েছে: আবেগ, স্টাইলড-উপাদান এবং রেডিয়াম। এই লাইব্রেরিগুলিতে এইচটিএমএল-তে কী প্রতিক্রিয়া রয়েছে তা CSS ধরণের রয়েছে। তারা আপনাকে আপনার সিএসএস লিখতে এবং আপনার জেএস কোডে আপনার সিএসএস নিয়ন্ত্রণ করতে দেয়।

আসুন তুলনা করি কীভাবে আমাদের কোডটি একটি সাধারণ উপাদান স্টাইলিংয়ের জন্য দেখায়। আমরা একটি "হ্যালো ওয়ার্ল্ড" ডিভ স্টাইল করব যাতে এটি ডেস্কটপে বড় এবং মোবাইলে আরও ছোট দেখায়।

শৈলী বৈশিষ্ট্য ব্যবহার করে Using

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. আপনি যদি নিজের উপাদানগুলিকে ইনলাইন করে স্টাইল করতে চান বা আপনার জেএসে সিএসএস-ইন-জেএস লাইব্রেরি ব্যবহার করেন তবে কোনও শৈলীর বৈশিষ্ট্য ব্যবহার করবেন না।

আমার কি এইভাবে সমস্ত স্টাইলিং করার লক্ষ্য করা উচিত, এবং আমার সিএসএস ফাইলে নির্দিষ্ট কোনও স্টাইল নেই?

2. আপনি যদি কোনও CSS-in-js সমাধান ব্যবহার করেন তবে CSS ফাইলগুলিতে শৈলী লেখার দরকার নেই। জেএসে আপনার সিএসএস লেখা উচ্চতর হয় কারণ আপনি জেএস যেমন সরবরাহ করেন তেমন সমস্ত সরঞ্জামগুলিকে একটি প্রোগ্রামিং ভাষা ব্যবহার করতে পারেন।

আমি কি সম্পূর্ণরূপে ইনলাইন শৈলীগুলি এড়ানো উচিত?

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>
   )
}

• প্রতিক্রিয়া কোডিং প্যাটার্নটি এনক্যাপসুলেটেড উপাদানগুলির মধ্যে রয়েছে - এইচটিএমএল এবং জেএস যা একটি উপাদানকে নিয়ন্ত্রণ করে তা একটি ফাইলে লেখা হয়। আপনার সিএসএস / স্টাইলের কোডটি সেই উপাদানটিই অন্তর্ভুক্ত।

• প্রয়োজনে আপনার উপাদানটিতে একটি স্টাইলিং প্রপ যুক্ত করুন add এই উপায়ে আপনি কোনও সন্তানের উপাদানগুলিতে লিখিত কোড এবং স্টাইলটি পুনরায় ব্যবহার করতে পারেন এবং এটি প্যারেন্ট উপাদান দ্বারা আপনার নির্দিষ্ট চাহিদা অনুসারে কাস্টমাইজ করতে পারেন।

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 ব্যবহার করতে পারেন, এটি বিচ্ছিন্ন শ্রেণীর নাম এবং আরও অনেক কিছু তৈরি করে! উদাহরণ কোড দেখতে হবে। সিনট্যাক্স হাইলাইটিং সমর্থনটির জন্য আপনি ভিজ্যুয়াল স্টুডিও মার্কেটপ্লেস থেকে ভিএসকোড এক্সটেনশনটি (alচ্ছিক) ইনস্টল করতে পারেন!

উত্স: 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

কিছু সময় আমাদের একটি উপাদান থেকে কিছু উপাদান স্টাইল করা প্রয়োজন তবে আমাদের যদি সেই উপাদানটি কেবলমাত্র প্রদর্শিত করতে হয় বা শৈলীটি এত কম হয় তবে সিএসএস ক্লাস ব্যবহার না করে আমরা প্রতিক্রিয়া জেএসে ইনলাইন শৈলীর জন্য যাই। রিএকটিজস ইনলাইন শৈলী এইচটিএমএল ইনলাইন শৈলীর সমান, কেবলমাত্র সম্পত্তির নামগুলি কিছুটা আলাদা

স্টাইল = {{প্রোপ: "মান"} using ব্যবহার করে যে কোনও ট্যাগে আপনার স্টাইলটি লিখুন

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 থেকে সর্বাধিক উত্সাহিত উত্তর প্রস্তাবিত রডিয়াম যা এখন রক্ষণাবেক্ষণ মোডে প্রেরণ করা হয় । সুতরাং বিকল্পগুলির একটি তালিকা যুক্তিযুক্ত যুক্তিসঙ্গত বলে মনে হয়। পোস্ট বিচ্ছিন্ন রেডিয়াম কয়েক লাইব্রেরি দাড়ায়। লিঙ্কযুক্ত প্রতিটি সাইটের উদাহরণ সহজেই পাওয়া যায় তাই আমি এখানে কোডটি অনুলিপি এবং আটকানো থেকে বিরত থাকব।

• আবেগ যা অন্যের মধ্যে স্টাইল্ড-উপাদানগুলি দ্বারা "অনুপ্রাণিত" হয়, জেএসে স্টাইল ব্যবহার করে এবং কাঠামোগত অজ্ঞাবলিক হতে পারে, তবে অবশ্যই এটি তার প্রতিক্রিয়া গ্রন্থাগারের প্রচার করে। আবেগ এই পোস্ট হিসাবে আপ টু ডেট রাখা হয়েছে।
• স্টাইলযুক্ত উপাদানগুলি তুলনীয় এবং আবেগ হিসাবে একই বৈশিষ্ট্যগুলির অনেকগুলি সরবরাহ করে। সক্রিয়ভাবে রক্ষণাবেক্ষণ করা হচ্ছে। উভয় আবেগ এবং স্টাইলযুক্ত উপাদান একই বাক্য গঠন আছে। এটি প্রতিক্রিয়া উপাদানগুলির সাথে কাজ করার জন্য বিশেষভাবে নির্মিত।
• জেএসএসে জেএসের শৈলীর জন্য আরেকটি বিকল্প যা ফ্রেমওয়ার্ক অজিনস্টিক যদিও এটিতে অনেকগুলি ফ্রেমওয়ার্ক প্যাকেজ রয়েছে, তাদের মধ্যে প্রতিক্রিয়া-জেএসএস রয়েছে।

Answer 19

যাইহোক ইনলাইন সিএসএস কখনই সুপারিশ করা হয় না। আমরা আমাদের প্রকল্পে স্টাইলযুক্ত উপাদান ব্যবহার করেছি যা জেএসএসের উপর ভিত্তি করে। এটি উপাদানগুলিতে গতিশীল শ্রেণীর নাম যুক্ত করে CSS ওভাররাইড রক্ষা করে। পাস করা প্রসাদের উপর ভিত্তি করে আপনি CSS মান যোগ করতে পারেন।