1. 使用 CSS Modules 进行样式隔离
1. 安装必要的依赖
如果你使用 webpack 作为构建工具，你可能需要安装 css-loader 和 style-loader。如果你的项目使用 Create React App 或其他现代前端框架，这些可能已经内置了。
npm install --save-dev css-loader style-loader
2. 编写 CSS Modules 样式
在微前端应用的MyComponent.module.css文件中：
/* MyComponent.module.css */
.root { display: flex; align-items: center; justify-content: center; height: 100px; background-color: #f0f0f0;
} .button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;
}
3. 在 React 组件中使用 CSS Modules
使用 styles.root 和 styles.button 而不是直接使用字符串 ‘root’ 和 ‘button’ 作为类名。CSS Modules 会自动为这些类名添加唯一的哈希值，以确保它们在每个微前端应用中都是唯一的。
// MyComponent.js
import React from 'react';
import styles from './MyComponent.module.css'; // 导入 CSS Modules const MyComponent = () => ( <div className={styles.root}> <button className={styles.button}>Click Me</button> </div>
); export default MyComponent;
4. 配置 webpack（如果需要）
// webpack.config.js
module.exports = { // ... module: { rules: [ // ... { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, // 启用 CSS Modules // 可以添加其他选项，如 localIdentName、camelCase 等 }, }, ], }, // ... ], }, // ...
};
在主应用中，你可以像平常一样加载微前端应用。由于每个微前端应用都使用 CSS Modules 进行样式隔离，因此它们之间的样式不会相互干扰。
2. 使用 CSS 命名空间进行样式隔离
为每个应用定义一个唯一的命名空间。这可以通过在 CSS 选择器前添加特定的前缀来实现。
app-a 的 CSS
/* app-a.css */
.app-a-root { /* 应用 A 的根样式 */
} .app-a-root .button { /* 应用 A 的按钮样式 */
}
app-b 的 CSS
/* app-b.css */
.app-b-root { /* 应用 B 的根样式 */
} .app-b-root .button { /* 应用 B 的按钮样式 */
}
在应用中应用命名空间
app-a 的 HTML
//在实际应用中，你可能不需要在类名中重复根命名空间（如 .app-a-root-button）
<div class="app-a-root"> <button class="app-a-root-button">点击我（应用 A）</button>
</div>
加载和隔离 CSS
最后，确保每个应用的 CSS 只在其自己的作用域内加载和应用。这可以通过在微前端框架中实现特定的加载和卸载逻辑来实现，或者通过使用
Webpack 的 css-loader 和 style-loader（或类似的工具）的 modules 选项来实现。
