CSS Modules
Scoped styles, composition, global styles, and dynamic classes.
Overview
CSS Modules provide scoped, modular CSS in Next.js.
Key Concepts
- Scoped Styles β Styles local to component
- Composition β Extend base styles
- Global Styles β Import in layout or global file
- Dynamic Classes β Conditional class names
- TypeScript Support β Type-safe class names
Code Examples
/* components/Card.module.css */
.card {
background: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cardHeader {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 8px;
}
.cardBody {
color: #666;
}
.primary {
border-left: 4px solid #0070f3;
}
.success {
border-left: 4px solid #28a745;
}
// components/Card.jsx
import styles from './Card.module.css';
export default function Card({ variant = 'default', title, children }) {
const classNames = [
styles.card,
variant === 'primary' && styles.primary,
variant === 'success' && styles.success
].filter(Boolean).join(' ');
return (
<div className={classNames}>
{title && <div className={styles.cardHeader}>{title}</div>}
<div className={styles.cardBody}>{children}</div>
</div>
);
}
// Global styles
// app/globals.css
body {
margin: 0;
font-family: system-ui, sans-serif;
}
// Layout with global styles
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Practice
Build a component library using CSS Modules with variants and composition.