সেলাই দিয়ে একটি প্রতিক্রিয়া অ্যাপ্লিকেশন স্টাইল করা

স্টিচ হল একটি আধুনিক CSS-in-JS লাইব্রেরি যা আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিকে স্টাইল করার জন্য একটি শক্তিশালী এবং নমনীয় উপায় প্রদান করে। এটি স্টাইলিংয়ের জন্য একটি অনন্য পদ্ধতির প্রস্তাব দেয় যা CSS এবং জাভাস্ক্রিপ্টের সেরা অংশগুলিকে একত্রিত করে, যা আপনাকে সহজেই গতিশীল শৈলী তৈরি করতে দেয়।

দিনের MUO ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন

সেলাই সেট আপ

ব্যবহার করে আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন স্টাইলিং সেলাই অনুরূপ স্টাইলড-কম্পোনেন্ট লাইব্রেরি ব্যবহার করে . যে সেলাই বিবেচনা করে এবং শৈলীকৃত উপাদান উভয়ই সিএসএস-ইন-জেএস লাইব্রেরি যা আপনাকে জাভাস্ক্রিপ্টে শৈলী লিখতে দেয়।

---

---

আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন স্টাইল করার আগে, আপনাকে অবশ্যই সেলাই লাইব্রেরি ইনস্টল এবং সেট আপ করতে হবে। এনপিএম ব্যবহার করে লাইব্রেরি ইনস্টল করতে, আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

npm install @stitches/react 

বিকল্পভাবে, আপনি এই কমান্ডের সাথে সুতা ব্যবহার করে লাইব্রেরি ইনস্টল করতে পারেন:

yarn add @stitches/react 

একবার আপনি স্টিচ লাইব্রেরি ইনস্টল করলে, আপনি আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন স্টাইল করা শুরু করতে পারেন।

শৈলীযুক্ত উপাদান তৈরি করা

স্টাইল করা উপাদান তৈরি করতে, সেলাই লাইব্রেরি একটি প্রদান করে শৈলীযুক্ত ফাংশন স্টাইল করা ফাংশন আপনাকে স্টাইল করা উপাদান তৈরি করতে দেয় যা CSS শৈলী এবং উপাদানগুলির যুক্তিকে একত্রিত করে।

দ্য শৈলীযুক্ত ফাংশন দুটি আর্গুমেন্ট লাগে। প্রথমটি হল একটি HTML/JSX উপাদান, এবং দ্বিতীয়টি হল একটি অবজেক্ট যাতে এটিকে স্টাইল করার জন্য CSS বৈশিষ্ট্য রয়েছে।

---

---

এখানে আপনি কিভাবে ব্যবহার করে একটি স্টাইলযুক্ত বোতাম উপাদান তৈরি করতে পারেন শৈলীযুক্ত ফাংশন:

import { styled } from "@stitches/react"; 
 
export const Button = styled("button", { 
  padding: "0.7rem 0.8rem", 
  borderRadius: "12px", 
  backgroundColor: "#333333", 
  color: "#e2e2e2", 
  fontFamily: "cursive", 
  border: "none", 
}); 

উপরের কোড ব্লক একটি তৈরি করে বোতাম একটি গাঢ় পটভূমির রঙ, ধূসর পাঠ্য রঙ, একটি সীমানা ব্যাসার্ধ এবং কিছু প্যাডিং সহ উপাদান। মনে রাখবেন যে আপনি CSS বৈশিষ্ট্যগুলি কাবাব-কেস নয়, CamelCase-এ লেখেন। কারণ CamelCase হল জাভাস্ক্রিপ্টে CSS বৈশিষ্ট্য লেখার একটি সাধারণ উপায়।

---

---

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

এলজি ফোনে ইমোজি কিভাবে আপডেট করবেন

উদাহরণ স্বরূপ:

import React from "react"; 
import { Button } from "./Button"; 
 
function App() { 
  return ( 
    <> 
      <Button>Click Me</Button> 
    </> 
  ); 
} 
 
export default App; 

এই উদাহরণ ব্যবহার করে বোতাম একটি মধ্যে উপাদান অ্যাপ উপাদান. বোতামটি আপনার পাস করা শৈলী গ্রহণ করবে শৈলীযুক্ত ফাংশন, এটি এই মত দেখায়:

দ্য শৈলীযুক্ত ফাংশন আপনাকে একই ধরনের সিনট্যাক্স সহ CSS শৈলী নেস্ট করতে দেয় SASS/SCSS এক্সটেনশন ভাষা . এটি আপনার শৈলীগুলি সংগঠিত করা এবং আপনার কোডকে আরও পাঠযোগ্য করে তোলার জন্য এটিকে সহজ করে তোলে৷

এখানে নেস্টেড শৈলী কৌশল ব্যবহার করে একটি উদাহরণ:

import { styled } from "@stitches/react"; 
 
export const Button = styled("button", { 
  padding: "0.7rem 0.8rem", 
  borderRadius: "12px", 
  backgroundColor: "#333333", 
  color: "#e2e2e2", 
  fontFamily: "cursive", 
  border: "none", 
 
  "&:hover": { 
    backgroundColor: "#e2e2e2", 
    color: "#333333", 
  }, 
}); 

এই কোডটি লক্ষ্য করার জন্য নেস্টেড CSS শৈলী এবং একটি ছদ্ম-শ্রেণী ব্যবহার করে বোতাম উপাদান. যখন আপনি বোতামের উপর হোভার করেন, নেস্টেড নির্বাচক &:হোভার বোতামের পটভূমি এবং পাঠ্যের রঙ পরিবর্তন করে।

সিএসএস ফাংশনের সাথে স্টাইলিং

আপনি স্টাইল করা উপাদান তৈরি করতে অস্বস্তিকর হলে, সেলাই লাইব্রেরি অফার করে css ফাংশন, যা আপনার উপাদান স্টাইল করার জন্য ক্লাসের নাম তৈরি করতে পারে। দ্য css ফাংশন তার একমাত্র যুক্তি হিসাবে CSS বৈশিষ্ট্য সহ একটি জাভাস্ক্রিপ্ট অবজেক্ট নেয়।

এটি ব্যবহার করে আপনি কীভাবে আপনার উপাদানগুলিকে স্টাইল করতে পারেন তা এখানে css ফাংশন:

import React from "react"; 
import { css } from "@stitches/react"; 
 
const buttonStyle = css({ 
  padding: "0.7rem 0.8rem", 
  borderRadius: "12px", 
  backgroundColor: "#333333", 
  color: "#e2e2e2", 
  fontFamily: "cursive", 
  border: "none", 
 
  "&:hover": { 
    backgroundColor: "#e2e2e2", 
    color: "#333333", 
  }, 
}); 
 
function App() { 
  return ( 
    <> 
      <button className={buttonStyle()}>Click Me</button> 
    </> 
  ); 
} 
 
export default App; 

দ্য css ফাংশন বোতামটির জন্য CSS শৈলী তৈরি করে যা এই কোডটি তারপরে বরাদ্দ করে বোতাম শৈলী পরিবর্তনশীল দ্য বোতাম শৈলী ফাংশন সংজ্ঞায়িত শৈলীর জন্য একটি শ্রেণীর নাম তৈরি করে, যা তারপরে পাস করা হয় শ্রেণির নাম প্রপ এর বোতাম উপাদান.

গ্লোবাল স্টাইল তৈরি করা

ব্যবহার করে সেলাই লাইব্রেরি, আপনি ব্যবহার করে আপনার অ্যাপ্লিকেশনের জন্য বিশ্বব্যাপী শৈলী সংজ্ঞায়িত করতে পারেন globalCss ফাংশন GlobalCss ফাংশন আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনে বিশ্বব্যাপী শৈলী তৈরি করে এবং প্রয়োগ করে।

ব্যবহার করে আপনার বিশ্বব্যাপী শৈলী সংজ্ঞায়িত করার পরে globalCSS , আপনার মধ্যে ফাংশন কল অ্যাপ আপনার অ্যাপ্লিকেশনে শৈলী প্রয়োগ করার উপাদান।

উদাহরণ স্বরূপ:

import React from "react"; 
import { globalCss } from "@stitches/react"; 
 
const globalStyles = globalCss({ 
  body: { backgroundColor: "#f2f2f2", color: "#333333" }, 
}); 
 
function App() { 
  globalStyles(); 
 
  return <></>; 
} 
 
export default App; 

এই উদাহরণের জন্য শৈলী সংজ্ঞায়িত করে শরীর উপাদান ব্যবহার করে globalCss ফাংশন কলটি পটভূমির রঙ সেট করে #f2f2f2 এবং টেক্সট রঙ #333333 .

ডায়নামিক শৈলী তৈরি করা

এর অন্যতম শক্তিশালী বৈশিষ্ট্য সেলাই লাইব্রেরি হল গতিশীল শৈলী তৈরি করার ক্ষমতা। আপনি স্টাইল তৈরি করতে পারেন যা নির্ভর করে প্রপস প্রতিক্রিয়া সঙ্গে বৈকল্পিক চাবি. দ্য বৈকল্পিক কী উভয়ের একটি সম্পত্তি css এবং শৈলীযুক্ত ফাংশন আপনি আপনার কম্পোনেন্টের যত রকমের ইচ্ছা তৈরি করতে পারেন।

উদাহরণ স্বরূপ:

import { styled } from "@stitches/react"; 
 
export const Button = styled("button", { 
  padding: "0.7rem 0.8rem", 
  borderRadius: "12px", 
  fontFamily: "cursive", 
  border: "none", 
 
  variants: { 
    color: { 
      black: { 
        backgroundColor: "#333333", 
        color: "#e2e2e2", 
        "&:hover": { 
          backgroundColor: "#e2e2e2", 
          color: "#333333", 
        }, 
      }, 
      gray: { 
        backgroundColor: "#e2e2e2", 
        color: "#333333", 
        "&:hover": { 
          backgroundColor: "#333333", 
          color: "#e2e2e2", 
        }, 
      }, 
    }, 
  }, 
}); 

এই কোড একটি তৈরি করে বোতাম একটি সঙ্গে উপাদান রঙ বৈকল্পিক দ্য রঙ ভেরিয়েন্ট আপনাকে a এর উপর ভিত্তি করে বোতামের রঙ পরিবর্তন করতে দেয় রঙ প্রপ একবার আপনি তৈরি করেছেন বোতাম উপাদান, আপনি আপনার অ্যাপ্লিকেশনে এটি ব্যবহার করতে পারেন।

উদাহরণ স্বরূপ:

import React from "react"; 
import { Button } from "./Button"; 
 
function App() { 
  return ( 
    <> 
      <Button color="gray">Click Me</Button> 
      <Button color="black">Click Me</Button> 
    </> 
  ); 
} 
 
export default App; 

একবার আপনি এই অ্যাপ্লিকেশনটি রেন্ডার করলে, দুটি বোতাম আপনার ইন্টারফেসে প্রদর্শিত হবে। বোতামগুলো নিচের ছবির মত দেখাবে।

থিম টোকেন তৈরি করা

দ্য সেলাই লাইব্রেরি আপনাকে ডিজাইন টোকেনগুলির একটি সেট তৈরি করতে দেয় যা আপনার UI এর ভিজ্যুয়াল দিকগুলিকে সংজ্ঞায়িত করে, যেমন রঙ, টাইপোগ্রাফি, স্পেসিং এবং আরও অনেক কিছু। এই টোকেনগুলি ধারাবাহিকতা বজায় রাখতে সাহায্য করে এবং আপনার অ্যাপ্লিকেশনের সামগ্রিক শৈলীগুলিকে আপডেট করা সহজ দেখায়৷

এই থিম টোকেন তৈরি করতে, ব্যবহার করুন সেলাই তৈরি করুন ফাংশন দ্য সেলাই তৈরি করুন স্টিচ লাইব্রেরি থেকে ফাংশন আপনাকে লাইব্রেরি কনফিগার করতে দেয়। ব্যবহার নিশ্চিত করুন সেলাই তৈরি করুন একটি মধ্যে ফাংশন stitches.config.ts ফাইল বা ক stitches.config.js ফাইল

কিভাবে একটি থিম টোকেন তৈরি করতে হয় তার একটি উদাহরণ এখানে দেওয়া হল:

import { createStitches } from "@stitches/react"; 
 
export const { styled, css } = createStitches({ 
  theme: { 
    colors: { 
      gray: "#e2e2e2", 
      black: "#333333", 
    }, 
    space: { 
      1: "5px", 
      2: "10px", 
      3: "15px", 
    }, 
    fontSizes: { 
      1: "12px", 
      2: "13px", 
      3: "15px", 
    }, 
  }, 
}); 

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

import { styled } from "../stitches.config.js"; 
 
export const Button = styled("button", { 
  padding: " ", 
  borderRadius: "12px", 
  fontSize: "", 
  border: "none", 
  color: '$black', 
  backgroundColor: '$gray', 
}); 

উপরের কোড ব্লক কালার টোকেন ব্যবহার করে $ধূসর এবং $কালো বোতামের পটভূমি এবং পাঠ্য রঙের জন্য। এটি স্পেস টোকেনও ব্যবহার করে এবং বোতামের প্যাডিং এবং ফন্ট সাইজ ভেরিয়েবল সেট করতে বোতামের ফন্ট সাইজ সেট করতে।

সেলাই সহ দক্ষ স্টাইলিং

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

সেলাই লাইব্রেরির একটি দুর্দান্ত বিকল্প হ'ল আবেগ লাইব্রেরি। আবেগ একটি জনপ্রিয় CSS-in-JS লাইব্রেরি যা আপনাকে জাভাস্ক্রিপ্টে স্টাইল লিখতে দেয়। এটি ব্যবহার করা সহজ এবং আপনার অ্যাপ্লিকেশনের জন্য দুর্দান্ত শৈলী তৈরি করার জন্য অনেকগুলি বৈশিষ্ট্য অফার করে৷

আমাজন অর্ডার ডেলিভারি দিয়েছে কিন্তু কখনই আসেনি