React中如何给自定义组件传递并添加自定义className属性

分两步修改即可完成需求：

第一步：调整NavBar组件的定义 #

给NavBar组件新增className入参，将外部传入的自定义类名和组件本身的默认类名拼接即可，原生JSX写法示例：

// NavBar组件定义处代码
const NavBar = ({ className }) => {
  // nav-bar为组件原有默认类名，后面拼接外部传入的自定义类名，加空值兜底避免出现undefined类名
  return <nav className={`nav-bar ${className || ''}`}>
    {/* 保留组件原有内部逻辑和内容 */}
  </nav>
}

如果项目已经安装了clsx类名处理工具，也可以用更简洁的写法，自动过滤无效值：

import clsx from 'clsx'
const NavBar = ({ className }) => {
  return <nav className={clsx('nav-bar', className)}>
    {/* 保留组件原有内部逻辑和内容 */}
  </nav>
}

第二步：调用时传入自定义类名 #

在页面调用NavBar组件时，直接把你需要的自定义类名作为props传入即可：

const ServicesCiso = () => {
return (
    <div className="hero">
        <NavBar className="services-ciso-nav"/>
        <div className...
        // 保留页面其余原有代码

其他页面调用时传入对应的类名，即可实现不同页面下的NavBar样式差异化。

内容的提问来源于stack exchange，提问作者Oğuzhan Memiş