在 React 中，组件是开发应用的主要构建块。为了增加代码的可维护性和可复用性，我们需要将组件的样式和组件本身分离开来。在这篇文章中，我们将介绍如何使用 CSS Modules 在 React 中实现样式和组件的分离。
什么是 CSS Modules？
CSS Modules 是一种用于将 CSS 样式与组件分离的技术。它允许你在每个组件中定义局部样式，并将这些样式打包成一个唯一的 CSS 文件。
CSS Modules 通过将类名转换成唯一的哈希值来避免样式冲突。这个哈希值是基于该组件的路径和类名生成的，因此它总是唯一的。
如何在 React 中使用 CSS Modules？
要在 React 中使用 CSS Modules，我们需要在项目中安装 css-loader、style-loader 和 mini-css-extract-plugin。这些工具可以帮助我们将 CSS 样式打包在一起，并生成唯一的哈希值。
安装依赖项
我们首先需要通过 npm 安装 css-loader、style-loader 和 mini-css-extract-plugin：
npm install --save-dev css-loader style-loader mini-css-extract-plugin
在 webpack 中配置 CSS Modules
接下来，我们需要配置 webpack 以使用 CSS Modules。我们需要使用 module 选项来告诉 webpack，我们要使用 CSS Modules。
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
----------------------------
-
------- -------------
-------- -
-------- -----
--------------- ------------------------------------
---------- -----
--
--
--
--
--
--
-------- -
--- ----------------------
--------- --------------------
-------------- ------------------
---
--
--我们在 css-loader 的选项中启用了 modules 选项，并指定了 localIdentName。这将使我们在组件中使用类似 styles.className 的语法来引用样式。camelCase 选项设置为 true，它将类名转换为驼峰命名法。
在组件中使用 CSS Modules
现在我们已经在 webpack 中启用了 CSS Modules，接下来我们需要在组件中使用这些样式。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
----- ----------- - -- -- -
---- ---------------------------
--- ------------------------------- -----------
------
--
------ ------- ------------import styles from './MyComponent.css'; 引入组件的 CSS 文件，并将其存储在 styles 变量中。
我们可以使用 styles.className 语法来引用组件的样式。例如，styles.wrapper 将转换为唯一的哈希值，例如 MyComponent__wrapper___2aQ320。
在 JSX 中使用 CSS Modules
我们还可以在 JSX 中使用 CSS Modules，以实现更高级的样式。例如，我们可以通过检查状态和属性来动态地添加类名，然后在 CSS 文件中使用这些类名。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- --------------------
----- ----------- - -- -- -
----- -------- ---------- - ----------------
----- ----------- - -- -- -------------------
----- ---------------- - ----------------- -------- - ------------- - -----
------ -
---- ---------------------------
------- ---------------------------- ----------------------
----- ---
---------
------
--
--
------ ------- ------------在这个示例中，我们使用了 useState 钩子来创建了一个 active 状态，并在 handleClick 函数中将其切换。在 buttonClassNames 变量中，我们通过动态添加类名 styles.active 来实现不同状态的样式。
结论
在本文中，我们介绍了如何使用 CSS Modules 在 React 中实现样式和组件的分离。我们可以使用 css-loader、style-loader 和 mini-css-extract-plugin 来在 webpack 中启用 CSS Modules。然后我们可以在组件中使用 import styles from './MyComponent.css'; 引入组件的 CSS 文件，并使用 styles.className 语法来引用样式。我们还介绍了如何在 JSX 中使用 CSS Modules，以实现更高级的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f78967c5c563ced5a18376