面试题：Next.js 组件复用与样式隔离的冲突及解决

Question

当在 Next.js 中复用组件时，可能会遇到样式隔离带来的问题，例如某个通用组件在不同页面使用时样式相互干扰。请分析可能导致这种冲突的原因，并提出至少两种有效的解决方案。

Answer 1

可能导致冲突的原因

1. 全局样式污染：若组件使用了全局 CSS 样式，不同页面复用组件时，全局样式会相互影响，因为全局样式在整个应用中生效。
2. CSS 命名冲突：当组件内部样式的类名或选择器命名不够独特，在不同页面复用组件时，相同的类名或选择器可能会匹配到其他组件的元素，从而导致样式冲突。

有效的解决方案

1. CSS Modules：
   • 原理：CSS Modules 会为每个 CSS 文件生成唯一的类名。在 Next.js 中，只需将 CSS 文件命名为 [name].module.css 即可启用。
   • 示例：假设在 Button.module.css 中有如下样式：

.button {
  background - color: blue;
  color: white;
}

在组件中引入：

import styles from './Button.module.css';
function Button() {
  return <button className={styles.button}>Click me</button>;
}
export default Button;

2. Styled Components：
   • 原理：Styled Components 允许通过 JavaScript 来创建样式化组件，它会自动为每个组件生成唯一的样式。
   • 示例：

import styled from'styled - components';
const StyledButton = styled.button`
  background - color: green;
  color: white;
`;
function Button() {
  return <StyledButton>Click me</StyledButton>;
}
export default Button;

3. Shadow DOM：
   • 原理：Shadow DOM 提供了一种将组件的 DOM 和样式封装起来的方式，使其与页面的其他部分隔离开。在 Next.js 中，虽然不能直接使用原生 Shadow DOM，但可以借助一些库来模拟类似的功能，如 @webcomponents/webcomponentsjs 等。
   • 示例：（使用自定义元素结合 Shadow DOM 模拟，简化示意）

class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const style = document.createElement('style');
    style.textContent = `
      button {
        background - color: red;
        color: white;
      }
    `;
    const button = document.createElement('button');
    button.textContent = 'Click me';
    shadow.appendChild(style);
    shadow.appendChild(button);
  }
}
customElements.define('my - button', MyButton);
// 在 Next.js 组件中使用
function Button() {
  return <my - button></my - button>;
}
export default Button;