面试题：Next.js中CSS Modules样式作用域问题

Question

在Next.js项目使用CSS Modules时，如何确保样式只作用于特定组件，避免样式冲突？请阐述原理及具体实现方式。

Answer 1

原理

CSS Modules通过将CSS类名进行哈希处理，生成唯一的类名。这样每个组件的样式类名在全局范围内都是独一无二的，从而避免了样式冲突。每个CSS文件就像是一个模块，其内部定义的样式只在该模块（组件）内有效。

具体实现方式

1. 创建CSS Module文件：在Next.js项目中，通常将CSS Module文件命名为[组件名].module.css。例如，对于Button组件，可以创建Button.module.css文件。
2. 编写样式：在.module.css文件中编写组件所需的样式。例如：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

3. 在组件中引入并使用：在对应的组件文件中引入CSS Module文件，并使用其中定义的类名。以JavaScript组件为例：

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.button}>点击我</button>;
};

export default Button;

在上述代码中，styles对象包含了Button.module.css文件中定义的所有类名，通过styles.button方式来应用样式。这样就确保了.button样式只作用于Button组件，不会与其他组件的样式产生冲突。