کتابخانه Styled-Components در ری اکت و هرچیزی که باید راجبش بدونیم!

کتابخانه styled-components در ری اکت به ما اجازه میده از تکنیک css in js استفاده کنیم! یعنی داخل کامپوننت های ری اکتی خودمون از css استفاده کنیم! درواقع کتابخانه Styled-Components در ری اکت به ما اجازه میده که کامپوننت های اختصاصی خودمون رو به کمک تکنیک css-in-js قابل استفاده مجدد ( reusable ) کنیم.

اگه توضیحات بالا رو متوجه نشدید، اصلا نگران نباشید 🙂 چون قراره تو این مقاله به زبون ساده اما جامع بررسیش کنیم 🙂

با فرانت اندی همراه باشید ..

بیش از 5,653,000 دانلود هفتگی در NPM !

داستان چیه ؟!

ما به چند روش مختلف میتونیم به کامپوننت های اپیکیشن خودمون استایل ( style ) بدیم. اما یکی از بهترین روش ها، تکنیک Css in Js هست.

تکنیک Css In Js در ری اکت به ما اجازه میده داخل کامپوننت های ری اکتی خودمون، استایل های Css بنویسیم! به کمک این تکنیک دیگه نیازی به ایجاد یک فایل با فرمت css. نیست!

ما میتونیم داخل کامپوننت ری اکتی خودمون مستقیما استایل های CSS بنویسیم 🙂

درواقع کتابخانه styled-components در ری اکت از تکنیک css-in-js استفاده میکنه.

کتابخانه Styled-Component در ری اکت

برای بررسی کامل styled-components در ریکت ، بیاید یک پروژه ری اکتی بسازیم که بتونیم این کتابخانه رو بررسی کنیم :

				
					npx create-react-app APP_NAME

پس از نصب کتابخانه ری اکت ، هرچی داخل پوشه src بود حذف کنید به جز index.js و app.js ! دقیقا مطابق تصویر زیر :

خب عالیه 🙂

حالا تنها کاری که باید بکنیم، حذف کردن موارد اضافه از فایل app.js و index.js هست.

اگه موارد اضافه فایل App.js رو حذف کنیم، باید اینجوری بشه :

				
					function App() {
    return(
    	<div>
         سلام رفیق 🙂
        </div>
    )
}

و فایل index.js باید اینجوری بشه :

				
					import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

const root = ReactDom.createRoot(document.getElementById('root'))
root.render(
	<>
    	<App />
    </>
)

حالا باید پروژه React خودمون رو Start کنیم. برای اینکار کافیه ترمینال رو باز کنیم و دستور زیر رو داخلش بنویسیم :

باز کردن ترمینال در vsCode اگه از vscode استفاده میکنید، با فشار دادن دکمه های ` + ctrl ترمینال باز میشه. حالا برای start شدن پروژه دستور زیر رو داخلش بنویسید :

				
					npm start

برای نصب کتابخانه styled-components در ری اکت، باید از دستور زیر استفاده کنیم :

				
					npm install styled-components

با اجرای دستور بالا، کتابخانه styled-components برامون نصب میشه.

حالا ما میتونیم از styled-components در React استفاده کنیم 🙂

استفاده از Styled-Components چطوریه ؟!

بریم خیلی آسون styled-components رو یاد بگیریم …

تیکه کد زیر، فایل App.js هست. من داخل این فایل یک h1 برای نمایش هدر، یک تگ p برای نمایش متن و یک تگ button برای نمایش دکمه ایجاد کردم :

				
					
function App() {
  return (
    <div>
      <h1>Styled Components</h1>
      <p>Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse.</p>
      <button>Click ME!</button>
    </div>
  );
}

export default App;

تو کامپوننت بالا از styled-component استفاده نکردیم، برای اینکه از این کتابخانه استفاده کنیم باید این کتابخانه رو فراخوانی ( import ) کنیم :

				
					import styled from 'styled-components'

function App() {
  return (
    <div>
      <h1>Styled Components</h1>
      <p>Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse.</p>
      <button>Click ME!</button>
    </div>
  );
}

export default App;

تو کامپوننت بالا styled-component رو فراخوانی ( import ) کردیم ولی ازش استفاده ای نکردیم.

ما میخوایم تگ h1 خودمون رو سفارشی سازی کنیم ( بهش استایل css بدیم ) دقت کنید که میخوایم این استایل css رو داخل کامپوننت خودمون بهش بدیم. ( نه از طریق یک فایل css. )

تو تیکه کد زیر یک تگ h1 ایجاد کردیم و بهش استایل css دادیم :

				
					const H1 = styled.h1`
color: red;
font-size: 4rem;
`

تو تیکه کد بالا ما یه تگ اختصاصی ساختیم ( همون تگ h1 + استایل های اختصاصی خودمون مثل رنگ و فونت سایز )

ما باید برای تگ اختصاصی خودمون یک اسم بزاریم، تو تیکه کد بالا این اسم رو H1 گذاشتیم اما هر اسم دیگه ای میشه گذاشت برای این تگ.

ما باید استایل های css خودمون رو بین ` ` قرار بدیم:

				
					import styled from 'styled-components'

const H1 = styled.h1`
color: red;
font-size: 4rem;
`

function App() {
  return (
    <div>
      <H1>Styled Components</H1>
      <p>Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse.</p>
      <button>Click ME!</button>
    </div>
  );
}

export default App;

خروجی تیکه کد بالارو میشه تو تصویر زیر دید :

تبریک 🙂

ما یه تگ اختصاصی به کمک styled-components ساختیم که استایل های دلخواه خودمون رو بهش دادیم …

نکته درمورد نامگذاری تگ های اختصاصی به کمک Styled-Components اگه میخوایم یه تگ اختصاصی به کمک Styled-Components بسازیم و بهش استایل دلخواه بدیم، حتما باید با حروف بزرگ اسمش رو شروع کنیم مثل H1 یا Mytag و ..

حالا اگه از تگ خودمون توی مرورگر inspect بگیریم، میبینیم که یکسری class با اسامی عجیب بهش اضافه شده. دلیلش این هست که styled-components این اسامی تصادفی رو اضافه میکنه تا از تداخل نام کلاس ها جلوگیری کنه:

حالا بیاید به تگ button خودمون به کمک styled-components یکم استایل بدیم :

				
					const DefaultButton = styled.button`
background-color: #645cfc;
border: none;
padding: 10px;
color: white;
`

تو تیکه کد بالا ما یک تگ اختصاصی به اسم DefaultButton ساختیم و استایل های دلخواه خودمون رو بهش دادیم.

حالا ما میتونیم با DefaultButton مثل یک کامپوننت ری اکتی رفتار کنیم. تو تیکه کد زیر ما از DefaultButton استفاده کردیم :

				
					import styled from 'styled-components'

const H1 = styled.h1`
color: red;
`

const DefaultButton = styled.button`
background-color: #645cfc;
border: none;
padding: 10px;
color: white;
`

function App() {
  return (
    <div>
      <H1>Styled Components</H1>
      <p>Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse.</p>
      <DefaultButton>Click ME!</DefaultButton>
    </div>
  );
}

export default App;

تو تیکه کد بالا ما از تگ button استفاده نکردیم، بجاش از DefaultButton استفاده کردیم که به کمک کتابخانه Styled-Components ساختیمش! خروجی تیکه کد بالارو میشه تو تصویر زیر دید :

حالا بیاید یکم از قوانین Clean Coding پیروی کنیم 🙂

میخوایم یکم فایلها و کدهای خودمون رو تمیزتر کنیم …

ما یه پوشه به اسم Components داخل src میسازیم. داخل این پوشه اِلِمان های اختصاصی خودمون رو که به کمک کتابخانه styled-components در ری اکت ساختیم، قرار میدیم :

بطور مثال میتونیم اون تگ h1 که ساخته بودیم رو بیاریم اینجا. کافیه یک فایل به اسم Title.js بسازیم و داخلش H1 خودمون رو قرار بدیم.

یا یک فایل به اسم Button.js بسازیم و DefaultButton خودمون رو که استایل بهش داده بودیم قرار بدیم.

ما کامپوننت Title رو بصورت پیشفرض export میکنیم ( Default export ) اما کامپوننت Button رو بصورت named export ! حالا شاید بپرسید چرا ؟

چون ما میخوایم چندین Button با چندین استایل مختلف export کنیم. مثلا Button های زیر رو بسازیم :

Button

PrimaryButton

SuccessButton

DangerButton

و …

زمانیکه ما یک کامپوننت رو بصورت پیشفرض export میکنیم ( Default Export ) میتونیم بصورت زیر تو کامپوننت های دیگه فراخوانیش کنیم ( import کنیم ) :

				
					import H1 from './components/Title'

اما زمانیکه یک کامپوننت رو named export میکنیم، هنگام فراخوانی باید داخل {} بزاریمش :

				
					import {DefaultButton} from './components/Buttons'

یعنی اگه بخوایم کامپوننت H1 و DefaultButton رو توی فایل App.js فراخوانی کنیم باید بصورت زیر عمل کنیم :

				
					import H1 from './components/Title'
import {DefaultButton} from './components/Buttons'


function App() {
  return (
    <div>
      <H1>Styled Components</H1>
      <p>Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse.</p>
      <DefaultButton>Click ME!</DefaultButton>
    </div>
  );
}

export default App;

بررسی Props در کتابخانه styled-components !

اگه نمیدونید Props چیه، پیشنهاد میکنم قبل از هرچیز مقاله Props در ری اکت رو مطالعه کنید.

کامپوننت هایی که به کمک کتابخانه Styled-Components در react میسازیم، امکان دریافت Props دارن!

تا اینجای کار ما یاد گرفتیم یک کامپوننت اختصاصی به کمک کتابخانه styled components در ری اکت بسازیم که استایل دلخواه مارو داره. این کامپوننت ها میتونن Props بگیرن، مطابق کد زیر :

				
					import H1 from './components/Title'
import {DefaultButton} from './components/Buttons'


function App() {
  return (
    <div>
      <H1>Styled Components</H1>
      <p>Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse.</p>
      <DefaultButton>Click ME!</DefaultButton>
      <DefaultButton red>Click ME!</DefaultButton>
    </div>
  );
}

export default App;

اگه به خط 11 تیکه کد بالا دقت کنیم، میبینیم که به کامپوننت DefaultButton یک Props به اسم red پاس دادیم. حالا ما میتونیم داخل کامپوننت DefaultButton به این Props دسترسی داشته باشیم و استایل کامپوننت رو بر اساس Props دریافتی تغییر بدیم :

				
					import styled from 'styled-components'

export const DefaultButton = styled.button`
background-color:  ${(props) => (props.red && 'red') || '#645cfc'};
border: none;
padding: 10px;
color: white;
`

ما تو کامپوننت DefaultButton تونستیم بر اساس Props دریافتی، به کامپوننت خودمون استایل بدیم. تو خط 4 تیکه کد بالا Props رو چک کردیم و گفتیم اگه Props ما red بود، رنگ زمینه این کامپوننت قرمز بشه، در غیراینصورت یه رنگ دیگه!

پس حالا میتونیم به کامپوننت DefaultButton خودمون Props بدیم و بر اساس Props دریافتی، استایل کامپوننت رو مشخص کنیم.

ما بصورت زیر میتونیم از DefaultButton استفاده کنیم:

				
					import H1 from './components/Title'
import {DefaultButton} from './components/Buttons'


function App() {
  return (
    <div>
      <H1>Styled Components</H1>
      <p>Cillum culpa deserunt enim et eiusmod quis proident consequat tempor ipsum sunt esse.</p>
      <DefaultButton>Click ME!</DefaultButton>
      <DefaultButton red>Click ME!</DefaultButton>
    </div>
  );
}

export default App;

خروجی تیکه کد بالا، بصورت زیر میشه :

استایل های تو در تو، در کتابخانه styled components چطوریه ؟!

ما میتونیم تو کتابخانه styled components استایل های تو در تو بنویسیم 🙂 انجام دادن این کار خیلی سادس ! کافیه بصورت زیر عمل کنیم :

				
					import styled from 'styled-components'

function App() {
  return (
    <div>
      <Wrapper>
        <h1>Another heading</h1>
        <p>Another para</p>
        <button>Another button</button>
      </Wrapper>
    </div>
  );
}


const Wrapper = styled.div`
h1{
  text-align: center;
  color: violet;
}

p{
  font-size: 40px;
}

button{
  background-color: pink;
  padding: 4px 8px;
  border: none;  
}
`

export default App;

تو تیکه کد بالا یک div ساختیم و بهش یکسری استایل دادیم. ( اسم این div رو wrapper گذاشتیم )

حالا تمام پاراگراف های داخل این wrapper فونت سایز 40px میگیرن.همچنین button ها رنگ زمینه صورتی میگیرن.

شاید بپرسیم کاربرد این wrapper کجاست ؟

بطور مثال میتونیم برای وبلاگ خودمون یک wrapper با استایل های مدنظر خودمون بسازیم. ( یک wrapper برای تمامی صفحات وبلاگ، نه هر صفحه )

متغیر های Css در styled-components

فرض کنیم تو 100 کامپوننت مختلف از رنگ فرمز استفاده کردیم، حالا اگه بخوایم همه رنگ های قرمز رو به آبی تغییر بدیم باید چیکار کنیم!؟

طبیعتا باید این 100 فایل رو تغییر بدیم.

اما راه حل بهتری وجود داره! ما میتونیم رنگ های اپیکیشن خودمون رو بصورت متغیر دربیاریم و هرزمان خواستیم از اون رنگ استفاده کنیم، صرفا نام متغیر رو استفاده کنیم.

ما میتونیم یک فایل به اسم index.css بسازیم و داخلش متغیر های Css خودمون رو مشخص کنیم.

زمانیکه از کتابخانه Styled-Components در ریکت استفاده میکنیم، میتونیم از متغیر های css استفاده کنیم 🙂

تو مثال زیر ما تو فایل index.css یک متغیر نوشتیم :

				
					:root{
--primary-color: #8F00FF
}

ما میتونیم از متغیر بالا، بصورت زیر استفاده کنیم :

				
					const Wrapper = styled(Newcom)`
h2{
    color: green;
    text-align: center;
}

button{
    padding: 4px 10px;
    background-color: var(--primary-color);
    border: none;
}
`

ویژگی Dark Mode و Light Mode در کتابخانه Styled-Component

دیگه کمتر اپیکیشن مدرنی میبینیم که ویژگی دارک مود نداشته باشه! پیاده سازی ویژگی Dark Mode تو کتابخانه styled-components در React خیلی آسونه!

درابتدا ما باید ThemeProvider رو از کتابخانه styled-components فراخوانی کنیم. حالا باید کل App خودمون رو داخل ThemeProvider قرار بدیم :

				
					import styled, {ThemeProvider} from 'styled-components'
import Sample from "./components/Sample";
const baseTheme = {
  background: '#fff',
  color: '#222',
}
const darkTheme = {
  background: '#222',
  color: '#fff',
}
function App() {
  return (
    <ThemeProvider theme={darkTheme}>
     	<p>This is sample paragraph</p>
    </ThemeProvider>
  );
}

اما هنوز نمیتونیم از ویژگی دارک مود در Styled-Components استفاده کنیم. برای اینکار ما باید یک کامپوننت با استایل اختصاصی ایجاد کنیم. اسمش هر چیزی میتونه باشه.

ما اسمش رو Container میزاریم.

تو Container ما میتونیم به Theme و ویژگی های اون دسترسی داشته باشیم. بطور مثال میتونیم رنگ زمینه و رنگ متن رو تغییر بدیم.

رنگ زمینه و رنگ متن، مهمترین چیز هایی هستن که تو حالت دارک مود/لایت مود اهمیت دارن.

تو تیکه کد زیر یک Container ساختیم و رنگ زمینه و رنگ متن رو داخلش تغییر دادیم :

				
					import styled, {ThemeProvider} from 'styled-components'
import Sample from "./components/Sample";

const baseTheme = {
  background: '#fff',
  color: '#222',
}

const darkTheme = {
  background: '#222',
  color: '#fff',
}

const Container = styled.div`
color: ${(props) => props.theme.color};
background-color: ${(props) => props.theme.background};
`

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
        <Container>
     		<p>This is sample paragraph</p>
        </Container>
    </ThemeProvider>
  );
}

به Container دقت کنید! ( خط 14 )

اگه Theme ما تغییر کنه، ما میتونیم رنگ زمینه و رنگ متن رو تغییر بدیم.

به همین سادگی میتونیم دارک مود رو تو کتابخانه styled-components در ری اکت پیاده سازی کنیم.

انیمیشن در Styled-Components !

یکی از مهمترین بخش های هر اپیکیشن، انیمیشن هست . ما میتونیم به کمک کتابخانه styled components در react انیمیشن ایجاد کنیم!

زمانیکه از کتابخانه Styled-Components در ریکت استفاده میکنیم، میتونیم انیمیشن ایجاد کنیم.

فقط کافیه ویژگی keyframes رو فراخوانی ( import ) کنیم :

				
					import styled, {keyframes} from 'styled-components'

const spinner = keyframes`
to{
 transform: rotate(360deg);
}
`

const Loading = styled.div`
width: 6rem;
height: 6rem;
border: 5px solid #ccc;
border-radius: 50%;
border-top-color: black;
animation: ${spinner} 0.6s linear infinite;
`

export default Loading

خروجی تیکه کد بالا، انیمیشن زیر هست :

قابلیت as در styled-components چیه ؟

بیاید یه سناریو رو بررسی کنیم. فرض کنیم یک button داریم و میخوایم به این دکمه یک href بدیم تا وقتی کاربر روش کلیک کرد، به یک وبسایت دیگه منتقل بشه.

اما چنین چیزی غیرممکنه چون اصولا button نمیتونه خصوصیت href بگیره!

تیکه کد زیر، اشتباهه و کار نمیکنه چون button نمیتونه href بگیره :

				
					import React from 'react'
import {DefaultButton} from './components/Buttons'

const App = () => {
  return (
    <div>
      <DefaultButton href="https://www.google.com">Click</DefaultButton>
    </div>
  )
}

export default App

راه حل اما سادس!

ویژگی as در Styled-Components برای حل این مشکل به ما کمک میکنه. این ویژگی میتونه مشخص کنه که کامپوننت باید مثل چه تگ یا اِلِمانی رفتار کنه.

تو تیکه کد زیر ما به کامپوننت DefaultButton که با Styled-Components در ری اکت ساختیمش، ویژگی as دادیم و گفتیم باید مثل یک تگ a رفتار کنی :

				
					import React from 'react'
import {DefaultButton} from './components/Buttons'

const App = () => {
  return (
    <div>
      <DefaultButton as='a' href="https://www.google.com">Click</DefaultButton>
    </div>
  )
}

export default App

نتیجه تیکه کد بالا خیلی جالبه! چون DefaultButton که یک دکمه هست، مثل یک تگ a رفتار میکنه :

جمع بندی

ما تو این مقاله سعی کردیم به بررسی کامل کتابخانه styled-components در React بپردازیم. امیدوارم که به خوبی کاربرد و روش استفاده از styled components در ری اکت رو درک کرده باشید 🙂