面试题：Next.js中CSS模块化的基本实现方式

Question

在Next.js项目中，简述如何实现CSS模块化？请举例说明如何创建模块化的CSS文件并在页面组件中引入使用。

Answer 1

实现CSS模块化步骤

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

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

3. 在页面组件中引入使用：在相应的React组件（如Button.js）中引入并使用该CSS模块。示例代码如下：

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

const Button = () => {
  return <button className={styles.button}>Click me</button>;
};

export default Button;

这样就实现了Next.js项目中的CSS模块化，每个组件的样式都被封装在各自的CSS模块中，避免了全局样式冲突。