React-এ অবজেক্ট থেকে style অ্যাট্রিবিউটে ডেটা ইনসার্ট করা

এলিমেন্টে CSS স্টাইল style অ্যাট্রিবিউটের মাধ্যমেও যোগ করা যায়। এই এবং পরের কয়েকটি পাঠে আমরা ইনলাইন স্টাইলিং-এর পদ্ধতিগুলো পর্যালোচনা করব।

এখন আমরা styles.css ফাইলটি সংযুক্ত করব না, বরং প্রতিটি ট্যাগের জন্য স্টাইলের একটি অবজেক্ট আকারে style অ্যাট্রিবিউটে সংশ্লিষ্ট মানগুলি প্রেরণ করব, যা আমরা সরাসরি কম্পোনেন্ট ফাইলে লিখব।

সুতরাং, আগের পাঠে আমরা যে CSS স্টাইলবিহীন কম্পোনেন্টটি তৈরি করেছিলাম সেটি নেওয়া যাক:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

App.js ফাইলে return কমান্ডের আগে চলুন class1 ভেরিয়েবলে div-এর জন্য CSS স্টাইল সহ একটি অবজেক্ট তৈরি করি। মনে রাখবেন, এখানে প্রপার্টির নাম camelCase নোটেশনে লেখা হয়, এবং প্রপার্টির মানগুলি উদ্ধৃতির মধ্যে রাখতে হবে:

App.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center'
};

এখন প্রথম প্যারাগ্রাফের জন্য স্টাইল সহ class2 অবজেক্টটি যোগ করি:

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

দ্বিতীয় প্যারাগ্রাফের জন্য স্টাইল সহ class3 অবজেক্টটি:

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

এবং অবশেষে, শেষটির জন্য class4:

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}     

এখন, কম্পোনেন্টে CSS ক্লাসগুলি প্রয়োগ করতে, style অ্যাট্রিবিউটটি ব্যবহার করি। প্রথম প্যারাগ্রাফের জন্য আমাদের কাছে class2 ভেরিয়েবল ছিল, এটিকে মান হিসেবে পাস করি:

App.js<p style={class2}>text</p>

একইভাবে অবশিষ্ট ট্যাগগুলির জন্য অবজেক্ট থেকে স্টাইল যোগ করি।

ফলস্বরূপ, কম্পোনেন্টের কোডটি নিম্নরূপ দেখাবে:

App.jsfunction App() {
  const class1 = {
    width: '200px',
    border: '2px solid brown',
    padding: '10px',
    textAlign: 'center',
  };

  const class2 = {
    color: 'orangered',
    fontWeight: 'bold',
  };

  const class3 = {
    fontStyle: 'italic',
    color: 'brown',
  };

  const class4 = {
    backgroundColor: 'orange',
    fontWeight: 'bold',
    color: 'white',
  };

  return (
    <div style={class1}>
      <p style={class2}>text</p>
      <p style={class3}>text</p>
      <p style={class4}>text</p>
    </div>
  );
}