在 React 中，有多种方式可以为组件应用 CSS 样式，包括传统 CSS、CSS 模块、内联样式、Styled Components 等。每种方法都有其优缺点，适用于不同的场景。

目录

  1. 使用传统 CSS 文件
  2. 使用 CSS 模块
  3. 使用内联样式
  4. 使用 Styled Components
  5. 使用 Tailwind CSS
  6. 使用 Sass / SCSS
  7. 参考资料

1. 使用传统 CSS 文件

最基本的方式是使用外部 CSS 文件，然后在组件中引入。

示例

1. 创建 App.css

/* App.css */
.container {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

2. 在组件中引入 CSS

import React from 'react';
import './App.css';

function App() {
  return <div className="container">Hello, React!</div>;
}

export default App;

优点

✅ 结构清晰，适用于全局样式。
✅ 可与 CSS 预处理器（如 Sass/SCSS）一起使用。

缺点

❌ 可能导致全局污染，多个组件可能意外共享相同的样式。

2. 使用 CSS 模块

CSS 模块允许创建局部作用域的 CSS，避免全局污染。

示例

1. 创建 App.module.css

/* App.module.css */
.container {
  background-color: #ffcc00;
  padding: 20px;
  text-align: center;
}

2. 在组件中引入 CSS 模块

import React from 'react';
import styles from './App.module.css';

function App() {
  return <div className={styles.container}>Hello, React with CSS Modules!</div>;
}

export default App;

优点

✅ 作用域隔离，不会影响其他组件的样式。
✅ 适用于组件化开发，避免样式冲突。

缺点

❌ 需要导入 styles 并使用 styles.className，比传统 CSS 代码稍微复杂。

3. 使用内联样式

React 允许直接在 JSX 代码中使用内联样式，通过 style 属性传递一个JavaScript 对象。

示例

import React from 'react';

function App() {
  const containerStyle = {
    backgroundColor: '#4caf50',
    padding: '20px',
    textAlign: 'center',
    color: 'white'
  };

  return <div style={containerStyle}>Hello, React with Inline Style!</div>;
}

export default App;

优点

✅ 适用于动态样式（可以使用变量）。
✅ 组件的样式是独立的，不会影响其他组件。

缺点

❌ 不支持伪类（如 :hover、:focus）。
❌ 代码可读性差，复杂样式会让 JSX 变得冗长。

4. 使用 Styled Components

Styled Components 是一种CSS-in-JS 方案，允许在 JavaScript 代码中直接编写 CSS。

安装

npm install styled-components

示例

import React from 'react';
import styled from 'styled-components';

// 创建一个带有样式的组件
const Container = styled.div`
  background-color: #3498db;
  padding: 20px;
  text-align: center;
  color: white;
  border-radius: 5px;

  &:hover {
    background-color: #2980b9;
  }
`;

function App() {
  return <Container>Hello, React with Styled Components!</Container>;
}

export default App;

优点

✅ 组件级样式，不会污染全局。
✅ 支持动态样式，可使用 props 控制样式。
✅ 支持伪类（:hover、:focus）。

缺点

❌ 需要安装额外的库，增加项目体积。
❌ 对于大型项目，可能影响性能。

5. 使用 Tailwind CSS

Tailwind CSS 是一种**实用优先（Utility-First）**的 CSS 框架，适合快速开发。

安装

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

配置 tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

示例

import React from 'react';
import './index.css'; // Tailwind 默认样式

function App() {
  return (
    <div className="bg-blue-500 text-white p-4 rounded-lg text-center">
      Hello, React with Tailwind CSS!
    </div>
  );
}

export default App;

优点

✅ 快速开发，减少手写 CSS。
✅ 组件库丰富，适合 UI 设计一致的项目。

缺点

❌ 需要记忆较多的类名，可读性较低。
❌ 样式可能混乱，不适用于大型项目的可维护性。

6. 使用 Sass / SCSS

Sass/SCSS 是 CSS 的预处理器，支持变量、嵌套、Mixin 复用等特性，适用于大型项目。

安装

npm install sass

示例

1. 创建 App.module.scss

/* App.module.scss */
$primary-color: #ff5722;

.container {
  background-color: $primary-color;
  padding: 20px;
  text-align: center;
  color: white;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

2. 组件使用 SCSS

import React from 'react';
import styles from './App.module.scss';

function App() {
  return <div className={styles.container}>Hello, React with SCSS!</div>;
}

export default App;

优点

✅ 支持变量、嵌套、Mixin，代码更简洁。
✅ 适用于大型项目，提高样式的可维护性。

缺点

❌ 需要安装 sass，需要编译影响性能。

7. 参考资料

出站链接

站内链接

总结

方法适用场景优点缺点
传统 CSS全局样式简单易用容易污染全局
CSS 模块组件级样式作用域隔离使用方式稍复杂
内联样式动态样式直接在 JSX 中定义代码冗长，不支持伪类
Styled Components组件化开发支持动态 & 伪类需额外安装库
Tailwind CSS快速开发省去写 CSS，开箱即用类名多，可读性低
Sass/SCSS大型项目变量、Mixin、嵌套需额外安装，需编译

每种方式都有适用场景，选择合适的方法可以提高开发效率和代码的可维护性！ 🚀