بالاخره ری‌اکت ۱۸ منتشر شد 🎉

https://twitter.com/reactjs/status/1508838714180612100?s=21&t=_bNsgzs6KucbuFBiE3Y-Dg


@react_ir

سایت react.ir اماده شده و پس از مدت‌ها یه مقاله جدید نوشتم داخل گذاشتم

یه مسئله‌ای که تو CSS وجود داره بحث اولویت هاست

داخل فایل css ما میایم چند خط CSS مینویسم

. bg-blue {
  background: blue;
}

.bg-red {
 background: red;
}

بعد ما میایم این کلاس هارو داخل html element هایی که داریم استفاده میکنیم

  <button class=“bg-red” />

و الان ما یه دکمه رو صفحه داریم که رنگ پس زمینه‌ش قرمز هستش

حالا اگر من اومدم همزمان هم کلاس bg-blue هم bg-red و دادم به button چی میشه؟

  <button class=“bg-red bg-blue” />

ممکنه بگید خب چون bg-blue بعد از bg-red تو class قرار گرفته پس باید رنگ پس زمینه آبی بشه!
- که اشتباهه

تو قطعه کد CSS بالا چون کلاس red بعد از blue تعریف شده پس اولویت بالاتری داره و اگر همزمان رو یه المان ما این ۲ تا کلاس و بزاریم red برنده میشه

جابه‌جا کردن لیست class ها تو element ها خروجی کامپوننتمون تغییر نمیکنه
پس این ۲ تا قطعه کد خروجی یکسان دارن

  <button class=“bg-red bg-blue” />
  <button class=“bg-blue bg-red” />

حالا اگر ما یه پکیجی مثل tailwind و استفاده کنیم که هزاران هزار class مختلف داره از کجا باید بدونیم که کدوم class اولویتش از اون یکی بیشتره، بعد اصلا اینو بدونیم چه طوری میتونیم کامپوننت هایی بنویسیم که استایل هایی که دارن override بشن؟

اینجاست که tailwind-merge به کمکمون میاد

https://github.com/dcastil/tailwind-merge

این پکیج چه طوری کمکمون میکنه؟ فرض کنید bg-red و bg-blue کلاس های tailwind هستن و با همون اولویت قبلی که بالاتر داشتیم تعریف شدن

ما اگر بیایم این کلاس هارو به تابع tw-merge بدیم،اون class که دیرتر تو رشته class تعریف شده میاد class های قبلی که همون property و تغییر میدن (مثلا background) و پاک میکنه اینطوری دیگه ما مشکل و حل میکنیم!

import { twMerge } from 'tailwind-merge'

twMerge(‘bg-red bg-blue’)
// → ‘bg-blue’

twMerge(‘bg-blue bg-red’)
// → ‘bg-red’

@react_ir

https://youtu.be/Aa9O5CHR45k

@react_ir | react.ir