CSS如何在React项目中按组件引入样式_使用import单独引入组件CSS

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS如何在React项目中按组件引入样式_使用import单独引入组件CSS

2025-11-26

浏览次数：次

返回列表

通过import引入CSS文件可实现React组件样式隔离。为组件创建同名CSS文件并导入，使用className绑定样式，注意类名全局性可能导致冲突，建议采用唯一类名或CSS Modules避免。构建工具如Create React App原生支持该方式，开发生产环境均适用。

css如何在react项目中按组件引入样式_使用import单独引入组件css

在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 <button className="btn">点击我</button>;
}

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;
}