react如何使用外部css
使用外部 CSS 文件
在 React 项目中引入外部 CSS 文件是最直接的方式。通过 import 语句将 CSS 文件导入到组件中，Webpack 等打包工具会自动处理样式加载。
import './styles.css';
function App() {
return <div className="app-container">Hello World</div>;
}CSS 文件内容示例：
.app-container {
color: blue;
font-size: 16px;
}通过 CSS Modules 隔离样式
CSS Modules 提供局部作用域的 CSS 类名，避免全局污染。文件名需以 .module.css 结尾。
import styles from './styles.module.css';
function App() {
return <div className={styles.container}>Styled Content</div>;
}CSS Modules 文件示例：
.container {
background: #f0f0f0;
}使用 Sass/Less 预处理器
通过安装预处理器的依赖（如 sass 或 less），可以直接导入 .scss 或 .less 文件。
npm install sass组件中使用：
import './styles.scss';Sass 文件示例：
$primary-color: #333;
.body {
color: $primary-color;
}通过 CDN 引入全局 CSS
在 public/index.html 中通过 <link> 标签引入 CDN 上的 CSS 库：
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
/>动态加载 CSS
使用 useEffect 动态添加或移除外部 CSS 文件：
import { useEffect } from 'react';
function Component() {
useEffect(() => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://example.com/style.css';
document.head.appendChild(link);
return () => {
document.head.removeChild(link);
};
}, []);
return <div>Dynamic Styled Content</div>;
}注意事项
- 类名冲突：全局 CSS 可能影响其他组件，推荐使用 CSS Modules 或 BEM 命名规范。
- 性能优化：避免重复加载同一 CSS 文件，合并或按需加载样式。
- PostCSS 处理：现代构建工具默认支持自动添加浏览器前缀等优化。
