在前端开发中，我们经常需要处理组件之间的样式和类名管理，而 BEM 是一种流行的命名约定，用于在代码中简化类名的编写和维护。而 @bem-react/classname 是一个 npm 包，可以帮助我们在 React 应用中方便地使用 BEM。
安装 @bem-react/classname
在项目中使用 npm 包需要先安装，可以通过以下命令来安装 @bem-react/classname:
npm install --save @bem-react/classname
使用 @bem-react/classname
@bem-react/classname 是一个实现了 BEM 命名约定的 ReactJS 类名生成器，支持自定义块名、元素名和修饰符。
语法
@bem-react/classname 包含三个函数：block(), elem() 和 mod(), 分别用于生成块名、元素名和修饰符。
block(name: string).elem(name: string).mod(name: string, value: any)
name: string为字符串类型，用于指定名称value: any用于指定修饰符需要添加的值，可以是布尔、字符串或对象类型
使用 @bem-react/classname 的示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -----------------------
----- - - ---------------------
----- ----------- - -- -- -
---- ----------------
--- -----------------------
------- -- -- ----------
-----
-- -----------------------------
---- -- - ----------- --- -- ----------
----
------- ---------------------------- -------- ---- ----
----- ---
---------
------
--
------ ------- ------------在上面的示例中，我们创建了一个名为 myComponent 的 BEM 块，并设置了组件的基础类名为 myComponent。随后，我们在组件中使用了三个元素： title，description 和一个带有修饰符的按钮 button，它们分别使用了元素和修饰符生成函数。
这将输出以下 HTML：
-- -------------------- ---- -------
---- --------------------
--- ---------------------------
------- -- -- ----------
-----
-- ---------------------------------
---- -- - ----------- --- -- ----------
----
------- -------------------------- -----------------------------
----- ---
---------
------总结
通过本文介绍，我们了解了如何在 React 应用中使用 BEM 命名约定并安装和使用 @bem-react/classname 来生成类名。
除了上面的示例之外，@bem-react/classname 还支持和其他 React 库进行集成，例如：classnames 等。
学习和使用 BEM 命名约定和 @bem-react/classname 有助于我们在组件开发中更好地管理样式和类名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb238b5cbfe1ea0611125