کتابخانه styled-components در ری اکت به ما اجازه میده از تکنیک css in js استفاده کنیم! یعنی داخل کامپوننت های ری اکتی خودمون از css استفاده کنیم! درواقع کتابخانه Styled-Components در ری اکت به ما اجازه میده که کامپوننت های اختصاصی خودمون رو به کمک تکنیک css-in-js قابل استفاده مجدد ( reusable ) کنیم.
اگه توضیحات بالا رو متوجه نشدید، اصلا نگران نباشید 🙂 چون قراره تو این مقاله به زبون ساده اما جامع بررسیش کنیم 🙂
با فرانت اندی همراه باشید ..
ما به چند روش مختلف میتونیم به کامپوننت های اپیکیشن خودمون استایل ( style ) بدیم. اما یکی از بهترین روش ها، تکنیک Css in Js هست.
تکنیک Css In Js در ری اکت به ما اجازه میده داخل کامپوننت های ری اکتی خودمون، استایل های Css بنویسیم! به کمک این تکنیک دیگه نیازی به ایجاد یک فایل با فرمت css. نیست!
ما میتونیم داخل کامپوننت ری اکتی خودمون مستقیما استایل های CSS بنویسیم 🙂
درواقع کتابخانه styled-components در ری اکت از تکنیک css-in-js استفاده میکنه.
برای بررسی کامل 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 استفاده میکنید، با فشار دادن دکمه های ` + ctrl ترمینال باز میشه. حالا برای start شدن پروژه دستور زیر رو داخلش بنویسید :
npm start
برای نصب کتابخانه styled-components در ری اکت، باید از دستور زیر استفاده کنیم :
npm install styled-components
با اجرای دستور بالا، کتابخانه styled-components برامون نصب میشه.
حالا ما میتونیم از styled-components در React استفاده کنیم 🙂
بریم خیلی آسون 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;
لطفا برای مطالعه ادامه این مقاله + تیکه کد ها و مثالهای بیشتر روی لینک زیر کلیک کنید :
