面试题：Next.js中如何在页面组件里高效引入CSS静态资源并避免全局样式冲突

实现方式及使用技术

CSS Modules
- 使用方法：在Next.js项目中，创建与页面组件同名且以.module.css结尾的CSS文件。例如，对于HomePage.js组件，创建HomePage.module.css。在组件中引入该CSS文件：
```
import styles from './HomePage.module.css';
const HomePage = () => {
  return <div className={styles.container}>
    {/* 页面内容 */}
  </div>;
};
export default HomePage;
```
- 原理：CSS Modules会自动将CSS类名转换为唯一的哈希值，确保每个组件的样式类名在全局是唯一的，从而避免样式冲突。同时，由于每个组件的样式是单独引入的，在加载时可以实现按需加载，提高加载效率。
Styled - Components
- 使用方法：首先安装styled - components库（npm install styled - components）。然后在组件文件中使用它来定义样式。例如：
```
import styled from'styled - components';
const Container = styled.div`
  background - color: lightblue;
  padding: 10px;
`;
const HomePage = () => {
  return <Container>
    {/* 页面内容 */}
  </Container>;
};
export default HomePage;
```
- 原理：Styled - Components采用了JavaScript模板字面量来定义样式，它会为每个定义的样式组件生成唯一的CSS类名，同样避免了样式冲突。并且它利用了CSS - in - JS的特性，样式与组件紧密绑定，在组件渲染时才加载相关样式，提升加载效率。

可能遇到的问题及解决办法

CSS Modules
- 问题：
  - 类名可读性问题：由于类名被转换为哈希值，在调试或阅读代码时，难以直观理解类名代表的样式含义。
  - 全局样式处理：对于一些需要全局应用的样式（如重置样式、全局字体等），CSS Modules处理起来不太方便。
- 解决办法：
  - 类名可读性：可以在CSS文件中对类名添加注释，或者在开发工具中配置相关插件，以便在调试时能看到原始类名。
  - 全局样式：可以使用next/global.css来定义全局样式，同时结合@layer规则（如果使用PostCSS）来隔离全局样式与组件样式，避免冲突。例如：
```
/* global.css */
@layer global {
  body {
    font - family: Arial, sans - serif;
  }
}
```
Styled - Components
- 问题：
  - 性能开销：由于使用JavaScript来定义样式，在构建和运行时可能会有一定的性能开销，特别是在大型项目中。
  - 样式复用：相比传统CSS，样式复用可能不够直观，需要通过技巧（如继承、提取公共样式函数等）来实现。
- 解决办法：
  - 性能开销：使用代码拆分和优化构建配置，如启用Babel插件对Styled - Components进行优化。同时，在开发过程中注意避免过度嵌套样式，减少不必要的样式计算。
  - 样式复用：可以通过创建公共的样式函数或组件来实现样式复用。例如：
```
import styled from'styled - components';
const baseButton = `
  padding: 10px 20px;
  border - radius: 5px;
  border: none;
  background - color: blue;
  color: white;
`;
const PrimaryButton = styled.button`
  ${baseButton}
  background - color: green;
`;
const SecondaryButton = styled.button`
  ${baseButton}
  background - color: orange;
`;
```

星途面试题库

面试题：Next.js中如何在页面组件里高效引入CSS静态资源并避免全局样式冲突

知识考点

面试题答案

实现方式及使用技术

可能遇到的问题及解决办法