在 React 中，有多种方式来隔离样式，避免全局样式污染或组件样式冲突。以下是几种常见的方式：

1. CSS Modules（推荐）

CSS Modules 让 CSS 文件的类名自动变成局部作用域，避免全局污染。

使用 CSS Modules

jsx
复制编辑
// 组件: Button.js
import styles from "./Button.module.css";

const Button = () => {
  return <button className={styles.btn}>点击我</button>;
};

export default Button;

css
复制编辑
/* 样式文件: Button.module.css */
.btn {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

✅ 优点：

• 类名局部化，不会影响其他组件
• 无需额外配置，create-react-app 和 Vite 原生支持

2. Styled Components（CSS-in-JS 方案）

styled-components 允许在 JS 文件中写 CSS，同时动态控制样式。

安装

sh
复制编辑
npm install styled-components

使用示例

jsx
复制编辑
import styled from "styled-components";

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

const App = () => <Button>点击我</Button>;

export default App;

✅ 优点：

• 样式局部作用域，不会影响全局
• 支持动态样式（props 控制颜色等）
• 适用于组件化开发

3. 使用 scoped 样式（仅限 Vue，不适用于 React）

React 本身不支持 scoped 关键字（Vue 的 scoped 仅适用于 Vue 组件）。

4. Tailwind CSS（原子 CSS 方案）

Tailwind CSS 使用原子类，所有样式都通过 className 直接控制，避免全局污染。

安装

sh
复制编辑
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

使用示例

jsx
复制编辑
const Button = () => {
  return <button className="bg-blue-500 text-white p-2 rounded">点击我</button>;
};

export default Button;

✅ 优点：

• 不会影响全局样式
• 不需要写 CSS 代码
• 适合大型项目

5. Shadow DOM + Web Components（高级方案）

使用 :host 和 shadow DOM 让组件样式完全隔离。

jsx
复制编辑
class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML = `
      <style>
        button { background: blue; color: white; padding: 10px; }
      </style>
      <button>点击我</button>
    `;
  }
}

customElements.define("my-component", MyComponent);

✅ 优点：

• 样式完全隔离
• 适合微前端架构
• 浏览器原生支持

总结

如果是普通 React 项目，推荐 CSS Modules 或 Styled Components！