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

আমরা পূর্ববর্তী পাঠের মতো কম্পোনেন্ট ফাইলে স্টাইলের অবজেক্ট লিখতে বাধ্য নই, বরং আমাদের স্টাইলের অবজেক্টগুলো নিয়ে একটি আলাদা ফাইল তৈরি করতে পারি এবং সেগুলোকে প্রয়োজনীয় কম্পোনেন্টে ইম্পোর্ট করতে পারি।

সুতরাং, আমাদের কম্পোনেন্টটি নেওয়া যাক CSS স্টাইল ছাড়া:

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

আসুন src ফোল্ডারে একটি আলাদা ফাইল styles.js তৈরি করি, যেখানে আমরা আমাদের স্টাইলের অবজেক্টগুলো লিখব:

styles.jsconst 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',
};

styles.js ফাইলের নীচে আমাদের অবজেক্টগুলোকে একটি অবজেক্ট হিসেবে styles এক্সপোর্ট করতে ভুলবেন না:

styles.jsexport const styles = {
  class1: class1,
  class2: class2,
  class3: class3,
  class4: class4
};

এখন styles অবজেক্টটি আমাদের কম্পোনেন্টে ইম্পোর্ট করি:

App.jsimport { styles } from "./styles";       

এখন আমরা সাধারণ styles অবজেক্ট থেকে আমাদের প্রয়োজনীয় CSS স্টাইলের অবজেক্ট আমাদের ট্যাগগুলোতে প্রয়োগ করতে পারি। প্রথম প্যারাগ্রাফে class2 অবজেক্ট থেকে স্টাইল প্রয়োগ করি:

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

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

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

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