In this approach, we are using the natural hierarchy in components to control CSS Modules’ specificity in Next.js App. The components here are paired with their own CSS Module. The ‘Header’ component, features a CSS Module with the classes like “.header” and “.nav”, which controls the layout and style of the header section. The same is done with the ‘Button; component, which ensures specificity and prevents the types to be leaked to the other parts of the app.
Syntax:
.button {
/* Button styling */
}
const Button = ({ children }) => {
return <button className={styles.button}>
{children}
</button>;
};
Example: Now, add the below code in the respective files as shown in the above directory structure.
Javascript
import React from "react";
import styles from "./Button.module.css";
const Button = ({ children }) => {
return (
<button className={styles.button}>
{children}
</button>
);
};
export default Button;
|
Javascript
import React from "react";
import styles from "./Header.module.css";
const Header = () => {
return (
<header className={styles.header}>
<nav className={styles.nav}>
<a className={styles.logo} href="#">
w3wiki
</a>
</nav>
</header>
);
};
export default Header;
|
Javascript
import React from "react";
import Header from "../components/Header";
import Button from "../components/Button";
const Home = () => {
return (
<div>
<Header />
<h1 style={{ color: "green" }}>
w3wiki
</h1>
<Button>Click Me</Button>
</div>
);
};
export default Home;
|
CSS
.button {
padding: 10px 20px;
background-color: lightblue;
border: none;
border-radius: 5px;
cursor: pointer;
}
|
CSS
.header {
background-color: lightgray;
padding: 10px;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: green;
text-decoration: none;
font-size: 24px;
}
|
Step to run the application:
Now, run the application by executing the below command in the terminal:
Output:
Controlling the specificity of CSS Modules in a Next.js App
CSS Modules are one of the popular techniques that are used for local scoping CSS in JavaScript behavioral applications. In Next.js applications, CSS Modules are mostly used to generate the unique class names for our styles, preventing them from conflicting with the styles from different components or libraries. In this article, we will look into the approaches for Controlling the specificity of CSS Modules in a Next.js App.
Contact Us