React-এ Styled Components ব্যবহার করে স্টাইলিং

পূর্ববর্তী পাঠগুলোতে আমরা গ্লোবাল CSS এবং ইনলাইন স্টাইলিং ব্যবহার করে স্টাইল করার কৌশলগুলো পর্যালোচনা করেছি। এই পাঠে আমরা বড় অ্যাপ্লিকেশনের জন্য আরও কার্যকরী একটি পদ্ধতি নিয়ে কাজ করব - styled-components লাইব্রেরি ব্যবহার করা।

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

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

প্রথমে Styled Components লাইব্রেরি ইনস্টল করি:

terminalnpm install --save styled-components

তারপর App কম্পোনেন্টে আমাদের প্রয়োজনীয় প্যাকেজটি ইম্পোর্ট করি:

App.jsimport styled from 'styled-components';

এখন আমরা ট্যাগগুলিকে স্টাইলে র‍্যাপ করতে পারি এবং সেগুলিকে React কম্পোনেন্ট হিসাবে প্রয়োগ করতে পারি, কিন্তু এখন JS-এ সরাসরি সংযুক্ত স্টাইল সহ। এই পদ্ধতিকে JS-এ CSS ও বলা হয়।

প্রথম প্যারাগ্রাফটি স্টাইল করা যাক। এর জন্য App ফাংশনের আগে ইম্পোর্ট স্ট্রিং এর পরে Text1 নামক একটি কম্পোনেন্ট তৈরি করব। লাইব্রেরির styled অবজেক্ট থেকে আমাদের একটি প্যারাগ্রাফ দরকার, তাই আমরা styled.p লিখি। তারপর, টেমপ্লেট স্ট্রিং-এ প্রয়োজনীয় CSS স্টাইলগুলো তালিকাভুক্ত করি - সাধারণ CSS-এর মতো:

App.jsconst Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

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

এখন App কম্পোনেন্ট ফাংশনের ভিতরে p ট্যাগটি আমাদের তৈরি করা কম্পোনেন্ট Text1 দিয়ে প্রতিস্থাপন করি CSS স্টাইল সহ:

App.js<Text1>text</Text1>     

একইভাবে দ্বিতীয় এবং তৃতীয় প্যারাগ্রাফ স্টাইল করি। এর জন্য Text2 এবং Text3 কম্পোনেন্ট তৈরি করি:

App.jsconst Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

এবং, শেষ পর্যন্ত, আমাদের divটি স্টাইল করি। এর জন্য একটি কম্পোনেন্ট তৈরি করি এবং এর নাম দিই Container:

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

আমাদের সমস্ত ট্যাগ তৈরি করা কম্পোনেন্ট দিয়ে প্রতিস্থাপন করি:

Calculator.jsimport styled from "styled-components";

const Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

const Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

const Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

function App() {
  return (
    <Container>
      <Text1>text</Text1>
      <Text2>text</Text2>
      <Text3>text</Text3>
    </Container>
  );
}

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

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

একইভাবে কম্পোনেন্ট স্টাইল করা যায়, উদাহরণস্বরূপ, Emotion লাইব্রেরি ব্যবহার করে।