在 React 项目中，有哪些方法可以引入和使用 CSS 样式？请列举并简述其特点。
考察说明
考察对 React 样式中多种 CSS 引入方式及其适用场景的理解。
回答思路
- 【回答框架 1】React 中引入 CSS 的方式主要包括：全局 CSS 文件、CSS Modules、CSS-in-JS 方案（如 styled-components、Emotion）、预处理器（如 Sass/Less）以及 Tailwind CSS 等原子化 CSS 框架。
- 【回答框架 2】全局 CSS 文件直接在组件文件中 import './style.css'，样式全局生效，可能导致命名冲突和维护困难。适用于简单项目或全局样式（如重置样式）。
- 【回答框架 3】CSS Modules 将 CSS 文件局部作用域化，通过 import styles from './style.module.css'，类名被自动编译为唯一类名，避免冲突。推荐用于组件级样式。
- 【回答框架 4】CSS-in-JS 通过 JavaScript 编写样式，如 styled-components，支持动态样式、主题和组件化，但可能增加运行时开销。适用于需要高度动态样式的场景。
- 【回答框架 5】预处理器（Sass/Less）提供变量、嵌套、混合等特性，提高样式编写效率，但需要构建配置。Tailwind CSS 则通过工具类快速开发，但可能导致类名冗长。
- 【关键点 1】React 引入 CSS 的方式有全局导入、CSS Modules、CSS-in-JS、预处理器和原子化 CSS。
- 【关键点 2】全局导入样式全局可见，容易冲突。
- 【关键点 3】CSS Modules 提供局部作用域，适合组件级样式。
- 【关键点 4】CSS-in-JS 支持动态样式，但可能影响性能。
- 【关键点 5】预处理器和原子化 CSS 各有优劣，按项目需求选择。
- 【易错点 1】CSS-in-JS 每次渲染可能重新生成样式，造成性能开销。
- 【易错点 2】预处理器编译配置不当可能导致样式失效。