React-এ style অ্যাট্রিবিউটে CSS স্টাইল নিয়ে কাজ

পূর্ববর্তী পাঠগুলোতে, style অ্যাট্রিবিউটে আমরা CSS স্টাইল সহ একটি অবজেক্ট ধারণকারী একটি ভেরিয়েবল পাস করতাম। মধ্যবর্তী ভেরিয়েবল ব্যবহার না করে, অবজেক্টটি সরাসরি অ্যাট্রিবিউটে লিখে দেওয়া যায় - এই ক্ষেত্রে আমাদের দুই জোড়া কার্লি ব্র্যাকেটের প্রয়োজন - প্রথমটি JSX ইনসার্টেশনের জন্য, এবং দ্বিতীয়টি অবজেক্টের জন্য।

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

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

উদাহরণস্বরূপ, আমাদের React কম্পোনেন্ট App-এর প্রথম প্যারাগ্রাফের জন্য সরাসরি CSS বৈশিষ্ট্যগুলো লিখি:

App.js<p style = {{
  color: 'orangered',
  fontWeight: 'bold' }}>
  text
</p>

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

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

App.jsfunction App() {
  return (
    <div style = {{
      width: '200px',
      border: '2px solid brown',
      padding: '10px',
      textAlign: 'center' }}>
      <p style={{
        color: 'orangered',
        fontWeight: 'bold' }}>
        text
      </p>
      <p style = {{
        fontStyle: 'brown',
        color: 'brown' }}>
        text
      </p>
      <p style = {{
        backgroundColor: 'orange',
        fontWeight: 'bold',
        color: 'white' }}>
        text
      </p>
    </div>
  );
}