چگونه با استفاده از ماژول های CSS به کامپوننت های React Style کنیم

کد CSS یکپارچه خود را به قطعات کوچک و قابل استفاده مجدد با کمک ماژول های CSS تقسیم کنید.

ماژول‌های CSS راهی برای محدوده محلی نام کلاس‌های CSS ارائه می‌کنند. وقتی از نام کلاسی یکسانی استفاده می‌کنید، لازم نیست نگران تغییر سبک‌ها باشید.

دریابید که ماژول های CSS چگونه کار می کنند، چرا باید از آنها استفاده کنید و چگونه آنها را در پروژه React پیاده سازی کنید.

ماژول های CSS چیست؟

اسناد ماژول‌های CSS یک ماژول CSS را به عنوان یک فایل CSS توصیف می‌کنند که نام کلاس‌های آن به‌طور پیش‌فرض به صورت محلی در محدوده قرار دارند. این بدان معنی است که می توانید متغیرهای CSS را با همان نام در فایل های CSS مختلف آدرس دهی کنید.

شما کلاس های ماژول CSS را درست مانند کلاس های معمولی می نویسید. سپس کامپایلر قبل از ارسال CSS به مرورگر، نام‌های کلاس منحصربه‌فردی را تولید می‌کند.

برای مثال، کلاس .btn زیر را در فایلی به نام styles.modules.css در نظر بگیرید:

.btn {
width: 90px;
height: 40px;
padding: 10px 20px;
}


برای استفاده از این فایل، باید آن را در یک فایل جاوا اسکریپت وارد کنید.

import styles from "./styles.module.js"


اکنون، برای ارجاع به کلاس .btn و در دسترس قرار دادن آن در یک عنصر، از کلاسی مانند شکل زیر استفاده کنید:

class="styles.btn"


فرآیند ساخت کلاس CSS را با نام منحصر به فردی از فرمت مانند _styles__btn_118346908 جایگزین می کند.

منحصر به فرد بودن نام کلاس ها به این معنی است که حتی اگر از یک نام کلاس برای اجزای مختلف استفاده کنید، آنها با هم برخورد نخواهند کرد. شما می توانید استقلال کد بیشتری را تضمین کنید زیرا می توانید سبک های CSS یک جزء را در یک فایل واحد، مخصوص آن جزء ذخیره کنید.

این امر اشکال زدایی را ساده می کند، به خصوص اگر با چندین شیوه کار کار می کنید. شما فقط باید ماژول CSS را برای یک جزء خاص ردیابی کنید.

ماژول های CSS همچنین به شما امکان می دهند چندین کلاس را از طریق کلمه کلیدی composes ترکیب کنید. به عنوان مثال، کلاس .btn زیر را در نظر بگیرید. شما می توانید آن کلاس را در کلاس های دیگر با استفاده از compose “توسعه دهید”.

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

.btn {
/* styles */
}

.submit {
composes: btn;
background-color: green;
color:#FFFFFF
}


این کلاس‌های btn. و .submit را ترکیب می‌کند. همچنین می‌توانید از ماژول CSS دیگری مانند این استایل بنویسید:

.submit {
composes:primary from "./colors.css"
background-color: green;
}


توجه داشته باشید که قبل از قوانین دیگر باید قانون نوشتن را بنویسید.

نحوه استفاده از ماژول های CSS در React

نحوه استفاده از ماژول های CSS در React به نحوه ایجاد برنامه React بستگی دارد.

اگر از برنامه create-react-app استفاده می کنید، ماژول های CSS خارج از جعبه تنظیم می شوند. با این حال، اگر می خواهید برنامه را از ابتدا ایجاد کنید، باید ماژول های CSS را با یک کامپایلر مانند وب پک پیکربندی کنید.

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

• گره روی دستگاه شما نصب شده است.
• درک اولیه ماژول های ES6.
• درک اولیه از React.

ایجاد یک React Application

برای ساده نگه داشتن کارها، می توانید از برنامه create-react-app برای ایجاد داربست برنامه React استفاده کنید.

این دستور را برای ایجاد یک پروژه React جدید به نام react-css-modules اجرا کنید:

npx create-react-app react-css-modules


این یک فایل جدید به نام react-css-modules با تمام وابستگی های مورد نیاز برای شروع با React ایجاد می کند.

ایجاد کامپوننت دکمه ای

در این مرحله یک کامپوننت Button و یک ماژول CSS به نام Button.module.css ایجاد خواهید کرد. در پوشه src یک پوشه جدید به نام Components ایجاد کنید. در آن پوشه یک پوشه دیگر به نام Button ایجاد کنید. کامپوننت Button و استایل های آن را در این پوشه اضافه خواهید کرد.

به src/Components/Button بروید و Button.js را ایجاد کنید.

export default function Button() {
return (
<button>Submit</button>
)
}


سپس یک فایل جدید به نام Button.module.css ایجاد کنید و موارد زیر را اضافه کنید.

.btn {
width: 90px;
height: 40px;
padding: 10px 20px;
border-radius: 4px;
border: none;
}


برای استفاده از این کلاس در کامپوننت Button، آن را به عنوان سبک وارد کنید و در نام کلاس عنصر دکمه به آن ارجاع دهید:

import styles from "./Button.module.css"

export default function Button() {
return (
<button className={styles.btn}>Submit</button>
)
}


این یک مثال ساده است که نحوه استفاده از یک کلاس را نشان می دهد. ممکن است بخواهید سبک ها را در اجزای مختلف به اشتراک بگذارید یا حتی کلاس ها را ترکیب کنید. برای این کار می توانید از کلمه کلیدی composes همانطور که قبلا در این مقاله ذکر شد استفاده کنید.

استفاده از ترکیب

ابتدا کامپوننت Button را با کد زیر تغییر دهید.

import styles from "./Button.module.css"

export default function Button({type="primary", label="Button"}) {
return (
<button className={styles[type]}>{label}</button>
)
}


این کد با پذیرش یک مقدار تایپ به عنوان پایه، مولفه Button را پویاتر می کند. این نوع نام کلاس اعمال شده روی عنصر دکمه را تعیین می کند. بنابراین اگر دکمه یک دکمه ارسال باشد، نام کلاس “submit” خواهد بود. اگر “خطا” باشد، نام کلاس “خطا” و غیره خواهد بود.

برای استفاده از کلمه کلیدی composes به جای نوشتن همه سبک ها برای هر دکمه از ابتدا موارد زیر را به Button.module.css اضافه کنید.

.btn {
width: 90px;
height: 40px;
padding: 10px 20px;
border-radius: 4px;
border: none;
}

.primary {
composes: btn;
color: #FFFFFF;
background-color: #6E41E2;
}

.secondary {
composes: btn;
color: #6E41E2;
background-color: #FFFFFF;
}


در این مثال، کلاس اولیه و کلاس ثانویه از کلاس btn استفاده می کنند. با این کار مقدار کدی را که باید بنویسید کاهش می دهید.

می‌توانید با یک ماژول CSS خارجی به نام colors.module.css که حاوی رنگ‌های مورد استفاده در برنامه است، این کار را حتی بیشتر کنید. سپس می توانید از این ماژول در ماژول های دیگر استفاده کنید. به عنوان مثال، فایل colors.module.css را در ریشه پوشه Components با کد زیر ایجاد کنید:

.primaryBg {
background-color: #6E41E2
}
.secondaryBg {
background-color: #FFFFFF
}

.primaryColor {
color: #FFFFFF
}
.secondaryColor {
color: #6E41E2
}


اکنون در فایل Button/Button.module.css، کلاس های اولیه و ثانویه را تغییر دهید تا از کلاس های بالا به صورت زیر استفاده کنید:

.primary {
composes: btn;
composes: primaryColor from "../colors.module.css";
composes: primaryBg from "../colors.module.css";
}

.secondary {
composes: btn;
composes: secondaryColor from "../colors.module.css";
composes: secondaryBg from "../colors.module.css";
}


Sass با ماژول های CSS

شما می توانید از ماژول های CSS برای بهبود ماژولار بودن پایگاه کد خود استفاده کنید. به عنوان مثال، می توانید یک کلاس CSS ساده برای یک جزء دکمه ایجاد کنید و از کلاس های CSS از طریق ترکیب مجدد استفاده کنید.

برای تقویت استفاده از ماژول های CSS، از Sass استفاده کنید. Sass—Syntactically Awesome Style Sheets—یک پیش پردازنده CSS است که تعداد زیادی ویژگی را ارائه می دهد. آنها شامل پشتیبانی از تودرتو، متغیرها و وراثت هستند که در CSS در دسترس نیستند. با Sass می توانید ویژگی های پیچیده تری را به برنامه خود اضافه کنید.

منبع مقاله