چطور از styled-components استفاده کنیم؟

یه کتابخونه ی دوست داشتنی برای استایل دادن به المان ها در 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 استفاده بشه؟استفاده از این کتابخونه چندتا مزیت داره که به صورت خلاصه اینجا مینویسم.مدیریت ساده تردر بعضی مواقع خوندن و مدیریت کد رو ساده تر میکنه. شخصا دوست دارم زمانی که با یک کامپوننت کار دارم همه چیز های مربوط بهش رو یکجا ببینم و بین فایل های مختلف جابجا نشم.کد های شرطی راحت ترفرض کنید حالت فعال و عادی توی یه دکمه رو میخواید پیاده سازی کنید. احتمالا از این روش استفاده می‌کنید:دو آبجکت برای تعیین حالت های مختلف تعریف شده و با توجه به state تغییر می‌کنند یا شاید از کلاس استفاده کنید که اون روش بهترم هست ولی ایده کلی رو ببینید.خیلی هم بد نیست ولی میتونه بهتر بشه:از تابع css برای نوشتن css ها استفاده کردمبه این شکل، متد 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 تا حد خوبی خیالمون راحته!فکر میکنم تا اینجا کافی باشه. قطعا اگر بخواید از تمام قابلیت های این کتابخونه استفاده کنید چیزای زیادی برای کشف کردن و یاد گرفتن هست.