React 中 CSS 书写方式全解析

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 一、引言
- [二、内联样式（Inline Styles）](#二、内联样式（Inline Styles）)
- - [2.1 基本用法](#2.1 基本用法)
  - [2.2 特点与适用场景](#2.2 特点与适用场景)
- [三、外部 CSS 文件（External CSS Files）](#三、外部 CSS 文件（External CSS Files）)
- - [3.1 基本用法](#3.1 基本用法)
  - [2.2 特点与适用场景](#2.2 特点与适用场景)
- [四、CSS 模块（CSS Modules）](#四、CSS 模块（CSS Modules）)
- - [3.1 基本用法](#3.1 基本用法)
  - [2.2 特点与适用场景](#2.2 特点与适用场景)
- [五、Styled Components](#五、Styled Components)
- - [3.1 基本用法](#3.1 基本用法)
  - [2.2 特点与适用场景](#2.2 特点与适用场景)
- 六、总结

一、引言

在 React 项目里，合理地书写 CSS 样式对于打造美观、高效且易于维护的用户界面至关重要。React 本身并未强制规定 CSS 的书写方式，开发者可以根据项目需求和个人偏好，选择不同的方案。本文将详细介绍 React 中常见的几种 CSS 书写方式及其特点、适用场景。

二、内联样式（Inline Styles）

2.1 基本用法

内联样式是直接在 JSX 元素中使用 style 属性来定义样式。样式以 JavaScript 对象的形式呈现，键为 CSS 属性名，值为对应的属性值。例如：

jsx 复制代码

import React from'react';

const InlineStyleComponent = () => {
    const divStyle = {
        backgroundColor: 'blue',
        color: 'white',
        padding: '10px'
    };

    return (
        <div style={divStyle}>
            This is a div with inline styles.
        </div>
    );
};

export default InlineStyleComponent;

2.2 特点与适用场景

特点：简单直接，可动态计算样式值；无需额外的 CSS 文件，便于管理。但样式代码分散在 JSX 中，不利于代码复用和维护，且不支持伪类、媒体查询等 CSS 特性。
适用场景：适用于需要根据组件状态动态调整样式的场景，如按钮的点击状态样式变化。

三、外部 CSS 文件（External CSS Files）

3.1 基本用法

创建一个独立的 CSS 文件，在 React 组件中引入该文件。例如，创建一个名为 styles.css 的文件：

css 复制代码

/* styles.css */
.external-style {
    background-color: green;
    color: white;
    padding: 10px;
}

然后在 React 组件中引入该文件：

jsx 复制代码

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

const ExternalStyleComponent = () => {
    return (
        <div className="external-style">
            This is a div with external styles.
        </div>
    );
};

export default ExternalStyleComponent;

2.2 特点与适用场景

特点：样式代码与组件代码分离，提高了代码的可维护性和复用性；支持所有 CSS 特性。但可能会出现全局样式冲突的问题。
适用场景：适用于项目中通用样式的定义，如全局的按钮样式、字体样式等。

四、CSS 模块（CSS Modules）

3.1 基本用法

CSS 模块通过将 CSS 类名局部化，避免了全局样式冲突。在创建 CSS 文件时，文件名采用 .module.css 的格式。例如，创建一个名为 styles.module.css 的文件：

css 复制代码

/* styles.module.css */
.css-module-style {
    background-color: orange;
    color: white;
    padding: 10px;
}

在 React 组件中引入并使用：

jsx 复制代码

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

const CSSModuleComponent = () => {
    return (
        <div className={styles.cssModuleStyle}>
            This is a div with CSS module styles.
        </div>
    );
};

export default CSSModuleComponent;

2.2 特点与适用场景

特点：实现了样式的局部作用域，避免了全局样式冲突；可以结合 JavaScript 动态使用样式类名。但需要额外的配置来支持 CSS 模块。
适用场景：适用于大型项目中，需要对组件样式进行细粒度控制，避免样式冲突的场景。

五、Styled Components

3.1 基本用法

Styled Components 是一个流行的 CSS-in-JS 库，它允许开发者在 JavaScript 代码中直接定义组件的样式。首先安装 styled-components 库：

bash 复制代码

npm install styled-components

然后在 React 组件中使用：

jsx 复制代码

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

const StyledDiv = styled.div`
    background-color: purple;
    color: white;
    padding: 10px;
`;

const StyledComponent = () => {
    return (
        <StyledDiv>
            This is a div with styled components.
        </StyledDiv>
    );
};

export default StyledComponent;

2.2 特点与适用场景

特点：样式与组件紧密结合，提高了代码的可维护性；支持动态样式和组件嵌套；自动处理浏览器前缀。但可能会增加打包文件的大小。
适用场景：适用于需要创建高度可复用、样式复杂的组件的场景。

六、总结

在 React 中，有多种 CSS 书写方式可供选择。内联样式简单直接，适合动态样式调整；外部 CSS 文件便于代码复用，但可能存在全局样式冲突；CSS 模块实现了样式的局部作用域，避免了冲突；Styled Components 则将样式与组件紧密结合，提高了可维护性。开发者应根据项目的规模、复杂度和需求，选择合适的 CSS 书写方式，以打造出高质量的 React 应用。