کدلپر | مستندات | Next JS - استایل دهی با CSS

ماژول های CSS

حدود ۱ دقیقه مطالعه

ماژول‌های CSS با تولید نام کلاس‌های منحصربه‌فرد، استایل‌ها را به صورت محلی (Locally scoped) محدود می‌کنند. این ویژگی به شما اجازه می‌دهد تا از یک نام کلاس در فایل‌های مختلف استفاده کنید، بدون اینکه نگران تداخل نام‌ها (Naming collisions) باشید.

برای استفاده از CSS Modules، یک فایل جدید با پسوند .module.css ایجاد کرده و آن را در هر کامپوننتی داخل پوشه app ایمپورت کنید:

/* app/blog/blog.module.css */
.blog {
  padding: 24px;
}

// app/blog/page.tsx
import styles from './blog.module.css'
 
export default function Page() {
  return <main className={styles.blog}></main>
}

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

ترجمه شده از منبع: منبع مستندات

/* app/blog/blog.module.css */
.blog {
  padding: 24px;
}

// app/blog/page.tsx
import styles from './blog.module.css'
 
export default function Page() {
  return <main className={styles.blog}></main>
}

ترجمه شده از منبع: منبع مستندات