面试题：Next.js中如何利用CSS Modules实现局部作用域CSS样式

Question

请阐述在Next.js项目里，使用CSS Modules实现局部作用域CSS样式的具体步骤，包括文件命名规范、如何引入以及如何在组件中使用。

Answer 1

文件命名规范

在Next.js项目中，CSS Modules文件命名需以 .module.css 结尾。例如，若组件名为 Button，其对应的CSS Modules文件可命名为 Button.module.css。

引入方式

在组件文件（如 Button.js）中，使用 import 语句引入CSS Modules文件。示例代码如下：

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

在组件中使用

引入后，通过 styles 对象来应用样式。例如，在 Button 组件中：

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

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

export default Button;

在上述代码中，styles.button 对应 Button.module.css 文件中定义的 .button 类的样式。