在 React 中，我们可以通过 props 传递参数给组件。其中一个常用的 prop 是 className，它可以被用于指定组件的 CSS 类名。
使用方法
要向 React 组件传递 CSS 类名，只需要将类名作为字符串赋值给 className prop 即可：
------------ -------------------- --
在组件内部，我们可以使用 props.className 来获取传递过来的类名：
-------- ------------------ - ------ ---- --------------------------------- ------------ -
这样渲染出来的 HTML 就会是：
---- ---------------------- -----------
当然，你也可以向组件传递多个类名，只需要使用空格分隔它们即可：
------------ -------------------- ---------- --
动态类名
有时候我们需要根据不同的条件来动态地添加或删除类名。在 React 中，我们可以根据需要在组件中返回不同的类名。例如，下面这个组件会根据是否选中来动态地添加或删除 selected 类名：
-------- ------------------ -
----- ------- - -----------
-- ------------------ -
-------------------------
-
------ ------- ------------------------- --------- ------------
-继承类名
有些情况下，我们希望将组件本身的类名与传递进来的类名合并起来。在 React 中，我们可以使用 ES6 的 rest 运算符和对象展开运算符来实现这个功能：
-------- ------------------ - ----- ----------- -------- - ------ ------ ---- ------------------------ -------------- --------------- ------------ -
总结
通过上面的介绍，你应该已经了解了如何向 React 组件中传递 CSS 类名，并且知道了动态类名和继承类名的实现方法。在实际项目中，灵活地运用这些技巧，可以帮助我们更便捷地管理组件样式。
完整示例代码：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26466