یه کتابخونه ی دوست داشتنی برای استایل دادن به المان ها در React! بریم ببینیم چی هست و چطوری ازش باید استفاده کرد!
نصب کردنش خیلی سادست:
yarn add styled-components // Or npm install styled-components
بعد از نصب هر جا که دوست داشتید میتونید import کنید.
نیازی به کانفیگ کردن یا تنظیمات خاصی نداره.
روش بوجود آوردن یک المان به همین سادگیه.
اول یه اسم بهش میدید مثلا Button که من دادم.
بعد تگی که میخواید باشه رو مشخص میکنید:
styled.div``; // <div></div> styled.a``'; // <a></a>
بعد باید دو تا کاراکتر ` (بک-تیک) بزارید جلوش که داخلش شروع میکنید به نوشتن استایل هایی که میخواید:
import styled from 'styled-components'; const Box = styled.div` padding: 10px; border-radius: 5px; `; export default Box;
خب حالا ما یک کامپوننت جدید داریم که نوعش div و اون استایل ها رو داره!
برای استفاده ازش کافیه اول import و بعد داخل render استفاده اش کنید:
میتونیم به جای استفاده از این روش، از مدل ساده کلاس های CSS استفاده کنیم! پس دقیقا برای چی و چه زمانی بهتره که از styled-component استفاده بشه؟
استفاده از این کتابخونه چندتا مزیت داره که به صورت خلاصه اینجا مینویسم.
مدیریت ساده تر
در بعضی مواقع خوندن و مدیریت کد رو ساده تر میکنه. شخصا دوست دارم زمانی که با یک کامپوننت کار دارم همه چیز های مربوط بهش رو یکجا ببینم و بین فایل های مختلف جابجا نشم.
کد های شرطی راحت تر
فرض کنید حالت فعال و عادی توی یه دکمه رو میخواید پیاده سازی کنید. احتمالا از این روش استفاده میکنید:
یا شاید از کلاس استفاده کنید که اون روش بهترم هست ولی ایده کلی رو ببینید.
خیلی هم بد نیست ولی میتونه بهتر بشه:
به این شکل، متد render از استایل ها خالی میشه و فقط المان ها رو میبینیم.
قابلیت استفاده از Theme ها!
تم ها (Theme) به شما این امکان رو میدن تا استایل های پیشفرض یا base تعریف کنید. مثلا فاصله بین خطوط، رنگ ها و فونت ها و اندازه margin و padding ها و ...
یه جورایی (نه دقیقا) میتونید به کمک theme یک دیزاین سیستم رو پیاده کنید که ظاهر یکپارچه ای به کل اپلیکیشن‌تون بده.
من وارد مثال هاش نمیشم چون واقعا مفصله. پیشنهاد میکنم از اینجا بخونید در موردش.
تست راحت تر
به خاطر اینکه styled-component ها در واقع توابع ساده ای هستند، بنابراین نوشتن تست هم براشون خیلی کار ساده تری هست. البته من خودم از این قابلیت تابحال استفاده نکردم ولی ارزش داره که بهش اشاره بشه.
این هم یک نمونه از تستی که با کمک jest-styled-components نوشته شده:
expect(box).toHaveStyleRule('background-color', '#f77d01');
استایل های ایزوله
به نظرم یکی از مهم ترین خصوصیات این کتابخونه همین مورد هست، حالا چی هست؟
این کدی هست که شما نوشتید:
و در نهایت چیزی که در مرورگر به وجود میاد اینه:
همینطور که میبینید اسم کلاس ها عجیب و غریب شده! مطمینا اگر شما دارید یک widget میسازید که قرار هست روی یک host اجرا بشه این فیچر به کارتون میاد چون از این طریق تا حدودی مشکل style conflict رو حل میکنه.
از طرف دیگه برای جلوگیری از ایجاد کد های تکراری، بعضی از استایل ها رو در قالب یک کلاس ایجاد میکنه و به چند المان میده که البته تا جایی که من دیدم خیلی عالی اینکار رو انجام نمیده ولی بهتر از هیچیه.
پشتیبانی مرورگر های مختلف
بعد از نوشتن کامپوننت ها، این کتابخونه خودش براتون prefix های مختلف رو قرار میده. مثال رو ببینید:
و چیزی که در نهایت بوجود میاد:
همینطور که میبینید prefix ها و value های مختلف نوشته شدند و از نظر cross-browser support تا حد خوبی خیالمون راحته!
فکر میکنم تا اینجا کافی باشه. قطعا اگر بخواید از تمام قابلیت های این کتابخونه استفاده کنید چیزای زیادی برای کشف کردن و یاد گرفتن هست.
