如何在 Next.js 应用中使用 CSS Modules？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，CSS 是不可或缺的一部分。而在 Next.js 应用中，我们可以使用 CSS Modules 来更好地管理样式并避免全局污染。本文将介绍如何在 Next.js 应用中使用 CSS Modules。

什么是 CSS Modules？

CSS Modules 是一种 CSS 的模块化方案，它将 CSS 文件中的类名（class）进行局部作用域处理，避免了全局作用域带来的样式冲突问题。每个 CSS Module 文件都会生成一个唯一的类名，这个类名只在当前文件中有效。

在 Next.js 应用中使用 CSS Modules

在 Next.js 应用中，我们可以通过在 CSS 文件名后加上 .module.css 后缀的方式来启用 CSS Modules。例如，我们有一个名为 styles.module.css 的 CSS 文件：

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

在我们的 Next.js 页面或组件中，我们可以像这样引入这个 CSS 文件：

import styles from './styles.module.css';

function MyComponent() {
  return (
    <h1 className={styles.title}>Hello, world!</h1>
  );
}

这里的 styles.title 就是我们在 CSS 文件中定义的 .title 类名。在运行时，Next.js 会将这个类名替换成一个唯一的类名，从而实现局部作用域。

继承和组合

CSS Modules 还支持继承和组合。我们可以在 CSS 文件中使用 composes 关键字将一个类名的样式应用到当前类名：

// javascriptcn.com 代码示例
/* 定义一个基础样式 */
.base {
  font-size: 16px;
  color: #666;
}

/* 继承基础样式 */
.title {
  composes: base;
  font-size: 24px;
  font-weight: bold;
}

在页面或组件中，我们可以像这样使用这个样式：

import styles from './styles.module.css';

function MyComponent() {
  return (
    <h1 className={styles.title}>Hello, world!</h1>
  );
}

这里的 styles.title 将同时包含 .title 和 .base 的样式。

我们还可以使用 composes 关键字组合多个样式：

// javascriptcn.com 代码示例
/* 定义两个基础样式 */
.base1 {
  font-size: 16px;
  color: #666;
}
.base2 {
  font-weight: bold;
  color: #333;
}

/* 组合两个基础样式 */
.title {
  composes: base1 base2;
  font-size: 24px;
}

总结

通过使用 CSS Modules，我们可以更好地管理样式并避免全局污染。在 Next.js 应用中，我们可以通过在 CSS 文件名后加上 .module.css 后缀的方式来启用 CSS Modules。CSS Modules 还支持继承和组合，可以帮助我们更快地编写样式。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650ba76f95b1f8cacd5b8a52