014 设置React组件样式：内联样式、外部CSS与CSS Modules

在 React开发中，为组件赋予符合设计规范的样式是构建完整用户界面的核心环节。React初始项目提供的index.css与App.css仅能搭建最基础的样式框架。随着项目功能迭代、组件规模扩大，复杂业务场景（如特定组件的交互样式、多主题切换、响应式布局适配）对样式的精细化与模块化要求日益提升，默认样式文件的结构与容量已无法满足需求。为实现样式按需组织、降低耦合度并提升可维护性，创建契合项目业务逻辑与设计规范的自定义样式文件，便成为开发流程中的必要环节。

在上一节中，我们虽然简单地提及使用style属性设置组件样式，但是本章将更加系统讲解 React 组件样式的四种核心实现方式 —— 默认样式、内联样式、外部 CSS 文件、CSS Modules，通过分步实践的方式，帮助你掌握不同样式方案的使用场景、语法规则与最佳实践。

项目默认样式

在 React 初始化项目中，默认生成的 index.css 与 App.css 是样式体系的基础文件，二者基于 “全局 – 局部” 的层级分工，共同构建了项目样式的基础框架。

index.css作为React项目全局样式的核心定义文件，作用域覆盖整个应用的所有组件与页面，是样式体系的“底层基座”。项目初始化时，该文件通常内置浏览器默认样式重置规则——例如清除不同浏览器原生的margin、padding差异，统一盒模型为border-box模式，其核心目标是抹平浏览器渲染的兼容性差异，确保应用样式在不同环境下表现一致。此外，index.css还承担应用级基础样式的定义职责，包括全局字体、文字颜色、背景色、行高、通用间距等贯穿全项目的样式属性，所有组件均可默认继承这些基础样式，有效避免通用样式的重复编写。从加载逻辑来看，index.css会在项目入口文件（index.js）中优先引入，其样式规则构成整个样式体系的基础层，后续组件样式可基于此进行覆盖或拓展。

App.css是专属于根组件App.js的样式文件，聚焦于根组件及其直属元素的样式定义，是连接全局样式与组件局部样式的中间层。其作用范围以App组件为边界：既可以继承index.css定义的全局样式，又能为App组件的核心结构（如页面整体布局框架、根容器的宽高与居中方式、全局导航栏/页脚等布局元素）定制专属样式。遵循React组件化的设计思想，App.css的样式规则默认不会渗透到子组件内部（除非显式使用全局选择器），可有效避免根组件样式与子组件样式的冲突。初始化项目中的App.css通常包含示例样式（如默认Logo样式、页面居中容器样式），直观展示组件与样式文件的关联逻辑。 从作用范围来看，index.css为“全局生效”，覆盖应用内所有元素；App.css为“局部聚焦”，仅作用于根组件及其直接子元素，二者形成清晰的层级分工。从维护逻辑而言，index.css适用于存放全组件共享的通用样式（如全局主题色、通用样式规范），修改该文件会影响整个应用的样式表现；App.css则用于定义页面级的布局骨架，修改范围仅局限于根组件，符合“按需修改、最小影响”的前端开发原则。实际开发中，二者协作互补：index.css奠定全局样式基础，保障全应用样式的一致性；App.css搭建页面核心布局框架，为子组件样式提供布局依托，共同支撑React项目样式体系的有序管理。

内联样式

在 React 中，内联样式并非传统 HTML 里以字符串形式书写的 CSS 规则，而是直接绑定到元素 style 属性的 JavaScript 对象，这一设计是 React “一切皆 JS” 核心理念的延伸，它将样式从独立的 CSS 文件中剥离，转化为可被 JavaScript 逻辑直接控制的数据，从而实现样式与组件状态、属性的深度联动，从底层设计上就与原生 HTML 内联样式形成了本质区别。为了更直观地理解这一核心差异，以下是一个最基础的内联样式绑定示例：

import React from 'react';

const GoogleComponent = () => {
    return (
        <div style={{
            color:"#4285F4",
            fontFamily:"Arial, sans-serif",
            textAlign:"center",
            padding:"20px"
        }}>
            <h1>Google</h1>
            <p>Organizing the world's informatiuon</p>
        </div>
    );
}
export default GoogleComponent;

在这个例子中，样式被包裹在两个嵌套的大括号中，这是style 属性的值不是一个静态字符串，而是一段需要动态计算的 JS 代码。这是因为在 JSX 中，任何被单对大括号 { } 包裹的内容，都会被 React 解析为动态的 JavaScript 表达式，而非普通的 HTML 字符串。这是 JSX 的核心规则：如果你想在 HTML 结构中嵌入变量、计算结果或任何 JS 逻辑。因此我第一对大括号是告诉 React：“这里面是 JavaScript，请执行它并把结果赋给 style。”

React规定内联样式必须接收一个JavaScript 对象，而对象字面量在 JS 中的语法正是用大括号 { } 包裹键值对。因此，第二对大括号仅仅是在定义一个普通的 JS 对象，它和你在 JS 文件中写的 const obj = { key: value } 里的大括号完全是等效的。所以外层大括号是 JSX 的语法标记，内层大括号是 JS 对象的语法标记。

你需要将这GoogleComponent组件导入到App.jsx文件中，作为App组件的子组件使用，后面的AppleComponent和AmazonComponent组件也同样如此。关于组件的导入，详见“1React组件的导出与复用”。

在上一节介绍JSX 表达式插值时，已经了解可以在JSX中插入变量，因此可以将样式对象提取为一个独立变量。所以上面的示例可以改为如下代码：

import React from 'react';

const GoogleComponent = () => {
    const containerStyle = {
        backgroundColor: "#4285F4",
        fontFamily: "Arial, sans-serif",
        textAlign: "center",
        padding: "20px"
    }
    return (
        <div style={containerStyle}>
            <h1>Google</h1>
            <p>  Organizing the world's informatiuon</p>
        </div>
    );
}

export default GoogleComponent;

语法规则：从 CSS 到 JavaScript 对象的映射

React 内联样式的语法需遵循 JavaScript 对象的约束，因此与原生 CSS 存在两处关键差异：

  1. 属性名的驼峰式转换：CSS 中以连字符分隔的属性名（如 background-color、font-size），在JavaScript 对象中需转换为驼峰命名法（backgroundColor、fontSize）。这是因为 JavaScript 对象的键名不允许包含连字符，驼峰式是标准的兼容写法。
  2. 属性值的类型处理：CSS 属性值在 React 中既可以是字符串，也可以是数字。若为数字，React 会自动为部分属性（如尺寸、间距类的 width、margin）添加 px 单位；若需使用非 px 单位（如 em、rem、%），或属性本身无需单位（如 zIndex、flex），则必须将值写为字符串形式。

以下示例清晰展示了这两种语法规则的具体应用：

import React from 'react';

const GoogleComponent = () => {
    return (
        <div style={{
            backgroundColor: "#4285F4",
            fontFamily: "Arial, sans-serif",
            textAlign: "center",
            padding: "20px"
        }}>
            <h1 style={{
                lineHeight: '1.8',
                color: '#333',
                marginBottom: 16
            }}>
                Google
            </h1>
            <p style={{
                zIndex: 10,
                flex: 1,
                fontSzie: '1.2rem'
            }}>
                Organizing the world's informatiuon</p>
        </div>
    );
}
export default GoogleComponent;

动态性：内联样式的核心优势

天然的动态性是 React 内联样式最核心的价值所在，由于样式本身就是 JavaScript 对象，它可以直接响应组件内部状态或是外部传入属性的实时变化，当组件的状态或属性更新时，绑定的样式对象会同步完成重新计算，对应元素的视觉表现也会随之无延迟更新。这种机制无需依赖 CSS 类名的增删切换，即可实现复杂的交互样式控制，比如点击态的高亮变化、加载过程中的视觉反馈、根据接口返回数据动态调整的主题色与布局尺寸等，让样式控制逻辑与组件的业务逻辑紧密绑定，大幅提升了单组件代码的内聚性，也降低了跨文件维护样式与逻辑关联的成本。以下示例通过一个简单的背景点击切换按钮，展示了内联样式如何响应组件状态的变化：

import React from 'react';
import { useState } from 'react';

const GoogleComponent = () => {
    const [isActive, setIsActive] = useState(true);
    const containerStyle = {
        backgroundColor: isActive ? '#4285F4':'#4CAF50',
        fontFamily: "Arial, sans-serif",
        textAlign: "center",
        padding: "20px"
    }
    return (
        <div style={containerStyle}>
            <h1>Google</h1>
            <p>  Organizing the world's informatiuon</p>
            <button onClick={() => setIsActive(!isActive)}>更改背景颜色</button>
        </div>
    );
}

export default GoogleComponent;

在这段代码中，我们通过useState(true)初始化响应式状态isActive为true，并将样式对象containerStyle的backgroundColor通过三元运算符与isActive绑定——状态为true时用蓝色，为false时用绿色。点击按钮时，onClick事件触发setIsActive(!isActive)对状态取反。状态更新后 React 自动触发组件重渲染，重新计算样式对象，最终将新背景色同步到 DOM，完成背景的切换。

内联样式作用范围与优先级

从作用范围来看，React 内联样式是严格的元素级样式，仅作用于绑定了 style 属性的单个元素，默认不会影响到子组件或是其他同级、后代元素。完全契合 React 组件化开发的样式隔离思想，从根源上避免了全局样式污染的问题。在样式优先级上，它完全遵循 CSS 的原生层叠规则，内联样式的优先级天然高于外部 CSS 文件、内部 style 标签定义的样式表，以及通过 className 绑定的 CSS 类名样式。因此常被用于精细化的样式覆盖，或是处理多来源样式冲突时的最终方案，无需通过提升 CSS 选择器权重即可实现精准的样式控制。以下示例同时使用了 CSS 类名和内联样式，直观展示了内联样式的优先级覆盖效果：

从作用范围来看，React 内联样式是严格的元素级样式，仅作用于绑定了 style 属性的单个元素，默认不会影响到子组件或是其他同级、后代元素。完全契合 React 组件化开发的样式隔离思想，从根源上避免了全局样式污染的问题。在样式优先级上，它完全遵循 CSS 的原生层叠规则，内联样式的优先级天然高于外部 CSS 文件、内部 style 标签定义的样式表，以及通过 className 绑定的 CSS 类名样式。因此常被用于精细化的样式覆盖，或是处理多来源样式冲突时的最终方案，无需通过提升 CSS 选择器权重即可实现精准的样式控制。以下示例同时使用了 CSS 类名和内联样式，直观展示了内联样式的优先级覆盖效果：

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

const GoogleComponent = () => {
    return (
        <div className='box'>
            <h1>Google</h1>
            <p className="box" style={{ backgroundColor: '#FF9800' }}>  Organizing the world's informatiuon</p>
        </div>
    );
}
export default GoogleComponent;

对应的 CSS 文件 PriorityExample.css 内容如下：

.box {
  width: 200px;
  height: 100px;
  margin: 10px 0;
  padding: 10px;
  background-color: #2196F3; /* 类名定义的蓝色背景 */
  color: white;
  border-radius: 4;
}

在上述代码中，GoogleComponent 组件使用外部 CSS 类和 React 内联样式。外层 <div> 元素与内层 <p> 元素的均通过 className=”box” 关联 PriorityExample.css 中定义的 .box 类选择器；同时 <p> 元素额外通过 React 内联样式语法（style 属性接收 JavaScript 对象），将 backgroundColor 显式指定为 #FF9800。依据 CSS 原生层叠优先级机制，内联样式优先级天然高于外部类选择器，因此 <p> 的内联背景色会覆盖 .box 类的对应属性。

内联样式的边界

尽管动态控制能力突出，但 React 内联样式存在明确的能力边界，无法完全替代传统 CSS 或是成熟的 CSS-in-JS 方案，其核心局限性体现在多个维度，包括：

  • 不支持伪类与伪元素：无法直接定义 :hover、:active、:focus 等伪类样式，也无法操作 ::before、::after 等伪元素，这使得交互反馈、装饰性元素的实现变得困难。
  • 不支持媒体查询与 CSS 动画：原生内联样式无法书写 @media 响应式规则，也无法定义 @keyframes 动画，若需实现响应式布局或复杂动画，需额外结合 JavaScript 逻辑或其他样式方案。
  • 样式复用成本高：内联样式对象若需复用，需手动提取为变量或函数，无法像 CSS 类名那样通过简单的类名复用实现批量样式控制，大规模复用易导致代码冗余。
  • 性能与调试的权衡：内联样式会增加 React 元素对象的体积，频繁的样式更新可能带来微小的性能开销；同时，样式直接绑定在元素上，在浏览器开发者工具中调试时，不如 CSS 类名那样容易追踪样式来源与层级关系。

在实际的 React 项目开发中，内联样式的最佳定位是传统 CSS 方案的补充，而非完全替代者，它最适用于几类特定的开发场景：需要根据组件状态或属性实时动态调整的一次性样式、仅作用于单个元素无需复用的精细化样式、从外部数据动态生成的个性化样式，比如服务端返回的用户主题配置、数据可视化图表中根据数值动态变化的元素样式等。在绝大多数项目的实践中，开发者通常会采用混合使用的模式，将静态的、可复用的、全局通用的样式通过 CSS 类名、CSS 模块或是成熟的 CSS-in-JS 方案实现，而将动态的、一次性的、强绑定业务逻辑的样式通过内联样式处理，二者互补结合，兼顾样式开发的灵活性、可维护性与性能表现，共同构成 React 项目完整的样式管理体系。

外部CSS文件：传统样式方案

外部 CSS 文件是前端开发的经典方案，通过 className 属性为元素绑定类名，再通过外部 CSS 文件定义样式，适用于样式复用性高、结构清晰的场景。在 React 中使用外部 CSS 文件，正是这种传统方案的延续，其核心逻辑依托现代前端构建工具（如 Webpack、Vite）的能力，将 CSS 与 React 组件的生命周期解耦，同时保留 CSS 原生的完整特性。

外部CSS文件基础实现

React 中外部 CSS 文件并非通过传统 HTML 的 <link> 标签直接引入，而是在组件文件（.jsx/.tsx）顶部通过 import 语句导入。这种导入语法本身并非 JavaScript 原生支持，而是由构建工具赋予的能力：构建工具会识别 CSS 文件的导入，将其从组件代码中分离，经过一系列处理后注入到最终的 HTML 页面中。

以常见的构建流程为例，开发环境下，构建工具通常使用 style-loader 或类似机制，将 CSS 内容以 <style> 标签的形式动态插入到 HTML 的 <head> 中，实现样式的即时生效与热更新；生产环境下，则会通过插件（如 MiniCssExtractPlugin）将所有 CSS 提取为一个或多个独立的 .css 文件，通过 <link> 标签引入，利用浏览器缓存提升性能。整个过程中，React 本身并不参与 CSS 的解析与渲染，仅负责通过 import 声明样式的依赖关系。

import React from 'react'
import "./AppleComponent.css";

const AppleComponent = () => {
    return (
        <div className="appleContainer">
            <h1>Apple</h1>
            <p className="appleParagraph">
                Apple是全球知名的消费电子品牌，主营手机、电脑、平板等智能设备。
            </p>
        </div>
    )
}

export default AppleComponent

在上面的AppleComponent.jsx中定义组件基础结构，并为元素添加className属性，值分别为appleContainer和appleParagraph作为 CSS 样式的关联标识。然后在AppleComponent.jsx中导入CSS 文件AppleComponent.css，使样式生效。

在components文件夹中创建组件文件同名的AppleComponent.css样式文件，在AppleComponent.css中通过类选择器定义样式，使用标准 CSS 语法：

.appleContainer {
  color: #FF9500; /* Apple橙色调 */
  font-family: "San Francisco", Arial, sans-serif;
  text-align: center;
  margin: 20px;
}

.appleParagraph {
  color: #666666; /* 深灰色 */
  font-size: 1.2rem;
}

作用域特性与全局样式污染风险

React 外部 CSS 文件的一个核心特性是默认全局作用域—— 这意味着 CSS 文件中定义的所有选择器（类选择器、ID 选择器、标签选择器等），都会作用于整个 HTML 文档，而非仅局限于导入它的 React 组件。这种特性与传统 HTML + CSS 的开发模式完全一致，但在 React 组件化的架构下容易引发问题：当多个组件导入的 CSS 文件中存在同名选择器时，会依据 CSS 的层叠规则（后引入的样式覆盖先引入的）产生样式冲突，即 “全局样式污染”。

造成全局作用域的原因在于构建工具的处理逻辑：无论 CSS 从哪个组件导入，最终都会被合并到同一个样式上下文（<style> 标签或独立 CSS 文件）中，选择器的作用范围不会被组件边界限制。这与 React 组件的逻辑隔离形成鲜明对比，也是外部 CSS 方案在大型 React 项目中面临的主要挑战。 我们分别给GoogleComponent和AppleComponent组件中的h1标题元素添加一个className属性，值都为title。代码入下所示：

// GoogleComponen.jsx 文件
import React from 'react';
import './GoogleComponent.css';

const GoogleComponent = () => {
 
    return (
        <div className='box'>
            <h1 className='title'>Google</h1>
            <p className="box" style={{ backgroundColor: '#FF9800' }}>  Organizing the world's informatiuon</p>
        </div>
    );
}
export default GoogleComponent;
// AppleComponent.jsx 文件
import React from 'react'
import "./AppleComponent.css";

const AppleComponent = () => {
    return (
        <div className="appleContainer">
            <h1 className='title'>Apple</h1>
            <p className="appleParagraph">
                Apple是全球知名的消费电子品牌，主营手机、电脑、平板等智能设备。
            </p>
        </div>

    )
}

export default AppleComponent

分别在GoogleComponent和AppleComponent组件的外部CSS文件GoogleComponent.css和AppleComponent.css中定义 title 的样式：

/* GoogleComponent.css 文件*/
.title {
  color: #2196F3; /* 蓝色 */
  font-size: 24px;
}
/*AppleComponent.css 文件*/
.title {
  color: #f44336; /* 红色 */
  font-size: 16px;
}

在所有组合和对应样式文件创建完成后，在App.jsx文件中先后导入GoogleComponent和AppleComponent组件，代码如下：

import GoogleComponent from './components/GoogleComponent';
import AppleComponent from './components/AppleComponent';
import AmazonComponent from './components/AmazonComponent';

function App() {
  return (
    <div>
      <GoogleComponent />
      <AppleComponent />
    </div>
  );
}

export default App;

因为 AppleComponent组件是后引入的，所以AppleComponent组件样式会覆盖GoogleComponent组件样式，两个两个组件的标题都会变成红色，因此产生了全局样式污染。

CSS 原生特性的完整支持

由于外部 CSS 最终会被转换为标准的 CSS 代码，因此它完整支持 CSS 的所有原生特性，无需任何额外适配。这包括：伪类（如 :hover、:active、:focus）、伪元素（如 ::before、::after）、媒体查询（@media）、关键帧动画（@keyframes）、CSS 变量（自定义属性）、层级选择器、属性选择器等。开发者可以利用已有的 CSS 知识，实现复杂的交互效果、响应式布局与主题系统，这是外部 CSS 方案的显著优势。

此外，外部 CSS 还能无缝集成 CSS 预处理器（如 Sass、Less、Stylus）与后处理器（如 PostCSS）。通过构建工具的配置，预处理器可以将嵌套语法、变量、混合宏（Mixin）等扩展特性编译为标准 CSS；后处理器则可以自动添加浏览器前缀（Autoprefixer）、压缩 CSS 代码、转换未来的 CSS 语法，进一步提升开发效率与样式兼容性。代码示例如下：

// GoogleComponent.jsx 文件
import React from 'react';
import './GoogleComponent.css';

const GoogleComponent = () => {

    return (
        <div className='container'>
            <h1 className='google_title'>Google</h1>
            <p className="google_description">  Organizing the world's informatiuon</p>
        </div>
    );
}
export default GoogleComponent;
/* GoogleComponent.css */
/* CSS 变量定义 */

.container {
  padding: 20px;
  background-color: white;
  box-shadow: var(--card-shadow);
  border-radius: 8px;
  transition: transform 0.3s ease; /* 过渡动画 */
  margin: 20px auto;
}

/* 伪类支持 */
.container:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.google_title {
  color: var(--primary-color);
  margin-top: 0;
}

/* 媒体查询支持 */
@media (max-width: 768px) {
  .container {
    max-width: 90%;
    padding: 15px;
  }
}

这段代码是 React 结合外部 CSS 文件的典型示例。在组件文件 GoogleComponent.jsx 中，先导入 React 与对应的外部样式文件，再定义函数组件 GoogleComponent，返回包含 div 容器、h1 标题和 p 描述的结构，分别通过 className 绑定 container、google_title、google_description 类名。外部 CSS 文件 GoogleComponent.css 定义了具体样式：container 设置内边距、背景、阴影、圆角、过渡动画与居中外边距；通过 :hover 伪类实现鼠标悬停时容器上移、阴影加深的交互效果；google_title 引用 CSS 变量 –primary-color 定义颜色；媒体查询在视口宽度≤768px 时，调整 container 的最大宽度与内边距，实现响应式适配。

外部 CSS 文件在 React 样式方案体系中处于 “基础层”，它最适合用于定义全局通用样式、静态的组件样式，以及对性能要求较高的场景。当项目规模扩大、对样式隔离与动态性要求提升时，可结合 CSS Modules 解决全局污染问题，或引入 CSS-in-JS 方案实现更灵活的动态样式控制。三种方案并非互斥，而是可以根据场景混合使用：外部 CSS 处理全局基础样式，CSS Modules 处理组件静态样式，内联样式或 CSS-in-JS 处理强动态性的样式，共同构成完整的 React 样式管理体系。

CSS Modules：作用域隔离的样式方案

CSS Modules 是一种在组件化开发中实现样式隔离的主流方案，它通过构建工具的能力，将 CSS 类名自动转换为全局唯一的哈希值，从根源上解决了传统外部 CSS 的 “全局样式污染” 问题，同时保留了 CSS 的原生特性与文件结构。

CSS Modules核心概念与解决的痛点

在传统 CSS 中，所有类名默认都是全局作用域，当多个组件使用同名类名时，会依据 CSS 层叠规则产生样式覆盖（即 “全局污染”）。CSS Modules 的核心思想是：让 CSS 类名的作用域局限于当前组件，实现组件级的样式隔离。

它并非新的 CSS 语法，而是一种构建工具层面的转换机制—— 通过 Webpack、Vite 等构建工具，将 CSS 文件中的类名自动哈希化（如 .button 变为 .button_abc123），确保每个类名在全局唯一，从而避免冲突。

CSS Modules的构建流程

CSS Modules 的实现完全依赖构建工具，以下是核心流程：

  1. 文件识别：构建工具通过特殊的文件后缀，通常为 .module.css识别 CSS Modules 文件，如AmazonComponent.module.css）。
  2. 类名哈希化：构建工具遍历 CSS 文件中的类名，为每个类名生成唯一的哈希字符串，如 [name]__[local]–[hash:base64:5]，实现样式的作用域隔离。
  3. 导出映射对象：构建工具将 “原始类名” 与 “哈希类名” 的映射关系导出为一个 JavaScript 对象（即 styles 对象），通过import将样式文件导入为对象，通过对象属性访问类名。
  4. 组件绑定：在组件中导入 styles 对象，通过“styles.原始类名”的方式绑定哈希后的类名。

module.css主流构建工具包括以下工具：

  • Webpack：通过 css-loader 的 modules 选项启用，需配置 localIdentName 控制哈希格式。
  • Vite：默认支持 CSS Modules，无需额外配置，识别 .module.css 后缀即可。

CSS Modules基础实现

创建 CSS Module 样式的步骤如下。

1.点语法

首先在components文件夹中创建以 .module.css 结尾的样式文件AmazonComponent.module.css：

/* AmazonComponent.module.css */
.container {
  color: #FF9900; /* Amazon橙色 */
  font-family: "Amazon Ember", Arial, sans-serif;
  text-align: center;
  margin: 20px;
}

.header {
  font-size: 1.8rem;
  font-weight: 700;
}

.paragraph {
  color: #0066C0; /* Amazon蓝色 */
  font-size: 1.2rem;
}

在module.css创建完成后，在AmazonComponent.jsx中导入样式模块，并通过className={styles.类名}绑定样式。其中，CSS类名必须符合JavaScript标识符规范——不能包含空格、特殊字符（如-、$、¥等），不能以数字开头，且类名固定，无需动态生成。这也是module.css推荐的类名命名规范（如驼峰命名法），既能适配点语法，也能提升代码一致性，代码如下所示：

import styles from "./AmazonComponent.module.css";

function AmazonComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.header}>Amazon</h1>
      <p className={styles.paragraph}>
        Amazon是全球最大的电商平台之一，同时布局云计算、流媒体等业务。
      </p>
    </div>
  );
}

export default AmazonComponent;

运行上面的代码，结果如下所示：

运行结果显示已经成功给AmazonComponent组件的类名添加了哈希值，这正是CSS Modules 作用域隔离的核心价值：即使其他组件定义了同名的container类，也不会与当前组件的container样式冲突 —— 因为 CSS Modules 会为每个类名生成唯一标识（如container_123abc），仅关联到当前组件的元素。

你可以上面的GoogleComponent和ApppleComponent组件的样式文件改为CSS Modules文件，解决这个两个组件中的h1标题元素样式被全局污染的问题，显示为正确的样式颜色。

2.方括号语法

方括号语法是module.css中更灵活的className属性访问方式，其语法结构为：样式对象[类名表达式]。与点语法不同，方括号内的类名可以是字符串、变量、计算表达式，不受JavaScript标识符规范限制，支持访问module.css中包含特殊字符、空格或数字开头的类名，同时能实现动态类名的访问，适配更复杂的业务场景。

需要注意的是，module.css允许定义包含特殊字符的类名（需用引号包裹），这类类名无法通过点语法访问，只能使用方括号语法；此外，当类名需要根据用户输入、接口返回值、循环变量等动态生成时，方括号语法也是唯一可行的选择。代码如下所示：

import styles from "./AmazonComponent.module.css";

function AmazonComponent() {
  return (
    <div className={styles['container-item']}>
      <h1 className={styles[header']}>Amazon</h1>
      <p className={styles['paragraph'}>
        Amazon是全球最大的电商平台之一，同时布局云计算、流媒体等业务。
      </p>
    </div>
  );
}
export default AmazonComponent;

当module.css中的类名包含特殊字符、空格或数字开头，无法使用点语法访问时；当需要根据业务逻辑动态生成类名（如根据组件props、循环索引、用户操作动态切换类名）时，方括号语法是最优选择。此外，在遍历module.css中的类名（结合Object.keys()、Object.entries()方法）时，也需使用方括号语法访问属性。

在使用 module.css 时，优先使用点语法访问类名，既符合module.css的推荐命名规范，也能保证代码的可读性；仅在遇到特殊字符类名、动态类名访问等点语法无法满足的场景时，使用方括号语法。避免过度使用方括号语法，尤其是静态类名访问，否则会降低代码的直观性，增加维护成本。

3.module.css中多个className的规范写法

在使用module.css开发组件时，经常需要为元素设置多个类名——如基础样式+状态样式、基础样式+动态样式、module.css类名+全局类名等场景。直接拼接字符串易出现空格遗漏、无效类名残留、样式冲突等问题，结合module.css的样式对象特性，以下梳理几种规范、优雅的多className写法，适配不同复杂度的业务场景。

通过字符串拼接运算符（+）将多个module.css类名（或module.css类名与全局类名）组合，适用于类名数量少、条件简单的场景。核心注意点是，多个类名之间必须添加空格分隔，避免类名合并失效；同时，访问module.css类名时，需根据类名特征选择点语法或方括号语法。代码如下所示：

import styles from "./AmazonComponent.module.css";

function AmazonComponent() {
  return (
    <div className={styles['container-item']+' '+styles.['title']}>
      <h1 className={styles.header+' '+styles.title}>Amazon</h1>
      <p className={styles['paragraph']+}>
        Amazon是全球最大的电商平台之一，同时布局云计算、流媒体等业务。
      </p>
    </div>
  );
}
export default AmazonComponent;

访问JavaScript 对象属性的点语法和方括号语法不能混用。字符串拼接写法简洁、上手成本低，适合简单场景（如2-3个类名、单一条件）；但当条件增多、类名数量增加时，代码会变得冗长混乱，且易因漏写空格导致类名失效，同时难以区分module.css类名与全局类名，不适合复杂场景。

结合ES6模板字符串（反引号` `）拼接类名，适用于类名数量适中、条件逻辑简单的场景，语法简洁，无需手动处理数组拼接，是基础字符串拼接的优化方案。使用时需注意，访问module.css类名时根据类名特征选择点语法或方括号语法，同时手动添加类名之间的空格。代码如下所示：

import styles from "./AmazonComponent.module.css";

function AmazonComponent() {
  return (
    <div className={`${styles['container-item']} ${styles.title}`}>
      <h1 className={`${styles.header} ${styles.title}`}>Amazon</h1>

      <p className={styles.paragraph}>
        Amazon是全球最大的电商平台之一，同时布局云计算、流媒体等业务。
      </p>
    </div>
  );
}

export default AmazonComponent;

模板字符串语法简洁、书写高效，适合中等复杂度场景（如3-4个类名、简单条件）；可通过换行格式化代码，提升可读性；但条件过多时，模板字符串会变得冗长，可读性下降，且需手动处理空格，不如classnames库灵活，不适合复杂条件场景。

1.14.5 本节小节

内联样式通过 JSX 的style属性实现，基于 JavaScript 对象定义，适合简单、动态的样式需求，需遵循驼峰命名法。外部 CSS 文件是传统方案，通过className绑定类名，样式与组件分离，适合通用样式复用。CSS Modules 通过.module.css文件实现样式作用域隔离，彻底解决类名冲突问题，是 React 组件样式的推荐方案之一。 掌握这三种样式实现方式，可根据项目场景灵活选择，为 React 组件构建规范、可维护的样式体系，为后续复杂界面开发奠定基础。