面试题：Next.js中CSS模块化与全局样式的协同

Question

在一个Next.js应用中，既有CSS模块化的局部样式，又有需要应用到整个应用的全局样式。请阐述如何合理配置和管理这两种样式，避免样式冲突，并且说明在动态导入组件时，CSS模块化样式如何正确加载。

Answer 1

1. 全局样式管理

在Next.js中，可以通过在pages/_app.js文件中引入全局样式。例如，如果使用CSS，可以创建一个styles/global.css文件，然后在_app.js中导入：

import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

这样全局样式就会应用到整个应用中。

2. CSS模块化局部样式管理

对于局部样式，Next.js支持CSS Modules。在组件目录下创建与组件同名的.module.css文件。例如，对于Button.js组件，创建Button.module.css文件。在Button.js中引入并使用：

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

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

export default Button;

CSS Modules会自动为每个类名生成唯一的哈希值，避免样式冲突。

3. 避免样式冲突

• CSS Modules的唯一性：如上述所说，CSS Modules通过生成唯一哈希值来避免局部样式冲突。每个组件的样式只作用于该组件内部。
• 全局样式命名规范：在编写全局样式时，采用BEM（Block Element Modifier）等命名规范，明确类名的用途，降低与其他组件样式冲突的可能性。例如，.header__logo--active，其中header是块，logo是元素，active是修饰符。

4. 动态导入组件时CSS模块化样式的正确加载

Next.js的动态导入支持加载CSS模块化样式。当使用next/dynamic进行动态导入组件时，CSS Modules样式会自动正确加载。例如：

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./DynamicComponent'));

function Page() {
  return (
    <div>
      <DynamicComponent />
    </div>
  );
}

export default Page;

在DynamicComponent.module.css中的样式会在DynamicComponent被加载时一同加载，并且保持其模块化的特性，不会与其他组件样式冲突。