How To Implement Multiple Classnames In NextJS ?
When styling components in Next.js, it’s common to encounter scenarios where you need to apply multiple classnames for different styling purposes. To implement multiple classnames in Next.js, you can utilize either the built-in classnames package or any other utility library like clsx.
We will discuss the different approaches to Implementing Multiple Classnames in NextJS:
Table of Content
- Using String Interpolation or Concatenation
- Using Utility Packages (`classnames` or `clsx`)
Step to Create a NextJS App
Step 1: First, create a new NextJS project by running the following command in your terminal:
npx create-next-app <project-name>
Step 2: Navigate into the project directory:
cd <project-name>
Project Structure:
Project Structure
The Updated dependencies in your package.json file is.
"dependencies": {
"next": "14.2.3",
"react": "^18",
"react-dom": "^18"
},
Using String Interpolation or Concatenation
Initially, beginners often follow this approach. However, they quickly encounter challenges with maintenance and readability, particularly when working with TailwindCSS for styling, which exacerbates the issue.
Update Page.js and make Home.module.css and button.module.css in styles folder for adding css.
Example: Below is an example to implementing Multiple Classnames In NextJS Using String Interpolation or Concatenation.
/* styles/button.module.css */
.button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
.active {
background-color: #28a745;
}
/* styles/button.module.css */
.button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
.active {
background-color: #28a745;
}
// page.js
import styles from './styles/Home.module.css';
import buttonStyles from './styles/button.module.css';
export default function Home() {
const isActive = true;
// Define multiple classNames using string interpolation or concatenation
const buttonClass = `${buttonStyles.button} ${isActive ? buttonStyles.active : ''}`;
return (
<div className={styles.container}>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to
<a href="https://www.w3wiki.net/">w3wiki!</a>
</h1>
<button className={buttonClass}>Click Me</button>
</main>
</div>
);
}
Output:
button effect
Using Utility Packages (`classnames` or `clsx`)
Presently, two utility packages address the aforementioned issue: classnames and clsx. Functionally, they are identical, with clsx being slightly smaller than classnames. Both packages weigh in at less than 500 bytes, rendering the choice inconsequential. It’s merely a matter of preference to determine which package name exudes more appeal.
Install the required packages using the below command.
npm install classnames
or
npm install clsx
The Updated dependencies in your package.json file is.
"dependencies": {
"classnames": "^2.5.1",
"clsx": "^2.1.1",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18"
},
In case of – Using `classnames`
Example: Below is an example to implementing Multiple Classnames In NextJS Using ‘classnames’.
/* styles/button.module.css */
.button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
.active {
background-color: #28a745;
}
// page.js
import React from "react";
import styles from "./styles/button.module.css"; // Import CSS module
export default function Home() {
const isActive = true;
// Define classNames using classnames package
const buttonClass = isActive ? `${styles.button} ${styles.active}` : styles.button;
return (
<div>
<h1>Welcome to Next.js!</h1>
<button className={buttonClass}>Click Me</button>
</div>
);
}
In case of – Using `clsx`
Example: Below is an example to implementing Multiple Classnames In NextJS Using ‘clsx’.
/* styles/button.module.css */
.button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
.active {
background-color: #28a745;
}
// page.js
import React from "react";
// Import clsx
import clsx from "clsx";
import styles from "./styles/button.module.css";
export default function Home() {
const isActive = true;
// Define classNames using clsx
const buttonClass = clsx(styles.button, {
[styles.active]: isActive
});
return (
<div>
<h1>Welcome to Next.js!</h1>
<button className={buttonClass}>Click Me</button>
</div>
);
}
Output:
Classname and clsx -same output
Conclusion
With these approaches, you can easily manage multiple classnames in your Next.js components, making styling more flexible and efficient. Whether you choose string interpolation or utility packages, these methods provide convenient solutions for styling your Next.js applications.
Contact Us