CSS作用域（样式分割）的使用汇总

CSS作用域（样式分割）是一种技术，用于将CSS样式限定在特定的范围内，以避免样式冲突和污染全局命名空间。以下是CSS作用域的使用汇总，包括两个示例说明。

1. 使用CSS Modules

CSS Modules是一种流行的CSS作用域解决方案，它通过在类名中添加哈希值来确保样式的唯一性。以下是使用CSS Modules的示例：

/* styles.module.css */

.container {
  background-color: #f1f1f1;
  padding: 20px;
}

.title {
  font-size: 24px;
  color: #333;
}

// Component.js

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

function Component() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, World!</h1>
    </div>
  );
}

在上面的示例中，.container和.title类名被转换为唯一的类名，以确保它们的样式仅适用于Component组件。

2. 使用CSS-in-JS库

CSS-in-JS库是另一种常见的CSS作用域解决方案，它允许在JavaScript代码中编写CSS样式。以下是使用Emotion库的示例：

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const styles = css`
  .container {
    background-color: #f1f1f1;
    padding: 20px;
  }

  .title {
    font-size: 24px;
    color: #333;
  }
`;

function Component() {
  return (
    <div css={styles}>
      <h1 className=\"title\">Hello, World!</h1>
    </div>
  );
}

在上面的示例中，使用css函数创建了一个包含.container和.title样式的CSS对象。然后，通过将css对象传递给css属性，将样式应用于Component组件。

这些示例展示了两种常见的CSS作用域解决方案，但还有其他方法可供选择，如CSS-in-JS的其他库和CSS预处理器的局部作用域。根据项目需求和个人偏好，选择适合的解决方案。

希望这个攻略对你有帮助！