React 是一个现代且流行的前端框架，但是它并没有内置CSS处理工具。因此，前端开发人员必须选择合适的CSS解决方案，以便更好的控制组件的样式和逻辑。本文将介绍在React中使用CSS模块化和CSS-in-JS的最佳实践。
CSS模块化
CSS模块化是指将样式文件分解成独立的模块，每个模块仅仅包含特定的样式规则。这样做的好处是避免样式相互污染，同时提高了样式的可重用性。在React中，我们可以使用CSS模块化来编写CSS样式。
安装CSS模块化库
在React中使用CSS模块化，首先我们需要安装支持CSS模块化的库。常见的CSS模块化库有CSS Modules、Radium、styled-components等。在本教程中，我们将使用CSS Modules作为示例。
npm install --save node-sass css-loader style-loader
一个包含CSS模块化的React组件可以像这样编写：
-- -------------------- ---- -------
------ ------ ---- -----------------------
----- ----------- - -- -- -
------ -
---- -----------------------------
--- ------------------------------- -----------
------
--
--在上述代码中，我们使用了node-sass、css-loader和style-loader将CSS文件编译成可以在浏览器中渲染的格式，同时，我们在组件中使用了特定的样式表（styles.module.scss），并使用styles.[className]语法来应用样式。
编写CSS模块化样式
在CSS模块化中，我们建议使用SASS或者LESS等CSS预处理器，以便更方便的编写CSS样式。我们通常将CSS样式按模块进行分类，并按模块进行导出，例如：
-- -------------------- ---- ------- -- ------------------ ---------- - -------- ----- ---------------- ------- ------------ ------- - ------ - ---------- ----- ------ ----- -
在上述代码中，我们将样式按照模块化的方式进行编写，每个样式规则都为其定义了一个类名，并将所有样式封装在相应的模块中。在React组件中使用时，我们通过导入这个样式文件，并通过styles.[className]的方式来应用相应的样式。
CSS-in-JS
CSS-in-JS是指在JavaScript中直接编写CSS样式的方法。与CSS模块化相比，CSS-in-JS可以更好的控制和管理样式，并具有更好的可维护性和可读性。常见的CSS-in-JS库有styled-components、Emotion等，在本教程中，我们将以styled-components为例进行示范。
安装styled-components
安装styled-components：
npm install --save styled-components
编写CSS-in-JS样式
在styled-components中，我们可以直接在JavaScript中编写CSS样式，并将其应用在特定的React组件上，例如：
-- -------------------- ---- -------
------ ------ ---- --------------------
----- --------- - -----------
-------- -----
---------------- -------
------------ -------
--
----- ----- - ----------
---------- -----
------ -----
--
----- ----------- - -- -- -
------ -
-----------
------------- --------------
------------
--
--在上述代码中，我们使用了styled-components，分别定义了一个Container和Title组件，并在其中编写了对应的样式规则。在组件中使用时，我们将这些样式组件之间嵌套，并按照上面的示例代码一样渲染，这样做可以获得更好的定制和可重用性。
CSS模块化和CSS-in-JS的优缺点
CSS模块化和CSS-in-JS都是在React中管理CSS样式的好方法。CSS模块化可以避免样式冲突，并提高样式重用性。CSS-in-JS可以更好的在JavaScript中管理和控制样式，方便动态的应用样式。两种方法各有优缺点，根据实际需求选择合适的方法即可。
CSS模块化的优点
- 样式相互隔离，避免样式冲突
- 提高样式重用性
- 借助SASS等预处理器可以更好的编写和维护样式
CSS模块化的缺点
- 样式表和组件代码分离，可读性不高
CSS-in-JS的优点
- 通过JavaScript动态定义样式，更方便控制和定制
- 样式重用性高，样式可以与组件进行关联
- 可读性高
CSS-in-JS的缺点
- 代码需要经过babel等编译工具处理，一定程度上增加了代码复杂度
- 一些CSS特性无法原生支持（例如伪元素等）
总结
在React中使用CSS可以使用CSS模块化和CSS-in-JS这两种方法。CSS模块化可以避免样式冲突，并提高样式重用性；CSS-in-JS可以更方便的控制和定制样式。根据实际需求选择合适的方法即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7b6dc48841e989444986b