Styled Component در دنیای توسعه‌ی React به‌طور فزاینده‌ای محبوب شده‌اند که روشی کارآمدتر و تمیزتر برای استایل‌دهی کامپوننت‌های React شما بدون نیاز به فایل‌های خارجی CSS ارائه می‌دهند. در این مقاله، مزایای استفاده از Styled Component را بررسی می‌کنیم و یک مثال ساده‌ی کد برای نشان دادن نحوه‌ی استفاده‌ی آن‌ها ارائه می‌دهیم.
بعد ایجاد پروژه React میریم سراغ نحوه کار با Styled Component ها
قبل از اینکه به Styled Component بپردازیم، بیایید به‌طور خلاصه در مورد استایل‌دهی سنتی CSS در React صحبت کنیم. در روش سنتی، شما یک فایل CSS جداگانه ایجاد کرده و آن را به React Component های خود وارد می‌کنید. سپس، کلاس‌های نام‌گذاری شده را به عناصر HTML خود اختصاص داده و کلاس‌های CSS را در فایل CSS خود ارجاع می‌دهید.
در حالی که این روش برای برخی پروژه‌ها خوب عمل می‌کند، با رشد کدبیس شما می‌تواند دست و پا گیر و دشوار شود. علاوه بر این، داشتن فایل‌های جداگانه‌ی CSS می‌تواند گاهی منجر به تصادم نام‌ها شود، زیرا کلاس‌های CSS به‌طور پیش‌فرض جهانی هستند.
کامپوننت‌های استایل‌شده راه حلی برای این مشکلات ارائه می‌دهند، زیرا به شما اجازه می‌دهند CSS را مستقیماً در فایل‌های جاوا اسکریپت خود بنویسید. این بدان معنی است که هر کامپوننت می‌تواند سبک‌های منحصر به فرد خود را داشته باشد و نیازی نیست نگران تصادم نام‌ها باشید.
برای شروع با کامپوننت‌های استایل‌شده، ابتدا باید کتابخانه مربوطه را نصب کنید. می‌توانید این کار را با اجرای دستور زیر در ترمینال خود انجام دهید:
npm install styled-components
پس از نصب بسته، می‌توانید آن را به کامپوننت ری اکت خود مانند این وارد کنید:
import styled from 'styled-components';
اکنون، بیایید نگاهی به یک مثال ساده‌ی کد بیندازیم تا کامپوننت‌های استایل‌شده را در عمل مشاهده کنیم. فرض کنید یک کامپوننت ساده‌ی دکمه داریم که می‌خواهیم آن را استایل‌دهی کنیم. در اینجا نحوه‌ی استفاده از کامپوننت‌های استایل‌شده برای دستیابی به این هدف را نشان می‌دهیم:
import React from 'react';
import styled from 'styled-components';
// ایجاد یک کامپوننت استایل‌شده به نام Button
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
`;
// رندر کامپوننت استایل‌شده
const MyComponent = () => {
return (
<Button>
Click me
</Button>
);
}
export default MyComponent;
در این مثال، ما یک کامپوننت استایل‌شده به نام "Button" را با استفاده از تابع styled ارائه‌شده توسط کامپوننت‌های استایل‌شده تعریف می‌کنیم. سپس، ویژگی‌های CSS را به‌طور مستقیم در داخل بک‌تیک‌ها، درست مانند یک فایل CSS معمولی، برای دکمه‌ی خود تعریف می‌کنیم.
برای استفاده از کامپوننت استایل‌شده، ما آن را به‌سادگی در کد JSX کامپوننت خود رندر می‌کنیم. در این مورد، کامپوننت Button را رندر می‌کنیم و متن "Click me" را به‌عنوان محتوای دکمه ارائه می‌دهیم.
هنگامی که اپلیکیشن خود را اجرا می‌کنیم، مشاهده خواهیم کرد که دکمه مطابق با ویژگی‌های CSS که با استفاده از کامپوننت‌های استایل‌شده تعریف کرده‌ایم، استایل‌دهی می‌شود.
یکی از مزایای اصلی استفاده از کامپوننت‌های استایل‌شده، سازمان‌دهی بهتر کد و قابلیت نگهداری آن است. سبک‌ها در داخل همان فایل کامپوننت تعریف می‌شوند که درک و مدیریت منطق استایل‌دهی هر کامپوننت را آسان‌تر می‌کند.
کامپوننت‌های استایل‌شده همچنین قابلیت‌های استایل‌دهی پویا را ارائه می‌دهند. می‌توانید ویژگی‌ها (props) را به کامپوننت‌های استایل‌شده‌ی خود منتقل کنید و آن‌ها را بر اساس حالت‌ها یا شرایط مختلف استایل‌دهی کنید. این امر ایجاد کامپوننت‌های قابل استفاده‌ی مجدد و انعطاف‌پذیر در اپلیکیشن ری اکت شما را آسان‌تر می‌کند.
در نتیجه، کامپوننت‌های استایل‌شده روشی ساده‌تر و کارآمدتر برای استایل‌دهی کامپوننت‌های ری اکت شما ارائه می‌دهند. با نحو شهودی و قابلیت‌های استایل‌دهی پویای خود، آن‌ها به یک انتخاب محبوب در بین توسعه‌دهندگان ری اکت تبدیل شده‌اند. با محصور کردن سبک‌ها در فایل‌های کامپوننت، کامپوننت‌های استایل‌شده مدیریت و نگهداری کدبیس شما را آسان‌تر می‌کنند. آن‌ها را در پروژه‌های بعدی ری اکت خود امتحان کنید و مزایای آن‌ها را به‌طور مستقیم تجربه کنید.