通过import引入CSS文件可实现React组件样式隔离。为组件创建同名CSS文件并导入，使用className绑定样式，注意类名全局性可能导致冲突，建议采用唯一类名或CSS Modules避免。构建工具如Create React App原生支持该方式，开发生产环境均适用。
在React项目中，可以通过import语法为每个组件单独引入对应的CSS文件，实现样式按组件隔离和管理。这种方式简单直接，适合大多数中小型项目。
1. 创建组件与对应CSS文件
为每个React组件创建一个同名的CSS文件，便于维护。例如，有一个按钮组件 Button.js，可以同时创建一个 Button.css：
Button/├── Button.js
└── Button.css
Button.js 内容示例：
import React from 'react';
import './Button.css'; // 引入局部样式
function Button() {
return ;
}
export default Button;
Button.css 内容示例：
立即学习“前端免费学习笔记（深入）”；
.btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #0056b3;
}
2. 样式作用域说明
虽然这样引入CSS后样式会生效，但需要注意：默认情况下，CSS类名是全局的。如果多个组件使用相同类名（如 .btn），可能会发生样式冲突。
为了避免冲突，可以：
- 使用更具体的类名，如
myapp-button - 采用BEM命名规范（如
btn--primary） - 或改用CSS Modules（推荐进阶使用）
3. 在组件中使用样式
导入CSS后，直接在JSX中使用对应的className即可。React会确保该CSS文件被包含在最终打包结果中。
确保路径正确。如果CSS文件在同一目录下，使用相对路径 ./Button.css；若在子目录中，调整路径即可。
4. 构建工具支持
使用Create React App或主流构建配置（如Webpack + css-loader）时，原生支持这种写法。import './Button.css' 会被处理并注入到页面的标签中。
生产环境下，样式通常会被提取合并，但仍然保持功能完整。
基本上就这些。通过 import 单独引入组件CSS，是最基础也最常用的样式组织方式，不复杂但容易忽略命名冲突问题。
