如何为React组件中React.ReactNode类型的props添加类名？

下面提供三种可行的解决方案，根据你的实际场景选择即可：

方案1：将icon props改为组件类型（推荐） #

把icon的类型从React.ReactNode改为React.ElementType，这样你可以直接在组件内部渲染该组件并传入自定义className，类型安全且灵活性最高。

修改后的代码：

interface Props {
  url: string;
  slug: string;
  icon: React.ElementType; // 改为组件类型
  color: string;
}

export default function SocialButton({ url, slug, icon: Icon, color }: Props) {
  const openLink = (url: string) => window.open(url, "_blank", "noreferrer");

  return (
    <button
      onClick={() => openLink(url)}
      className={`group/${slug} rounded p-2 hover:bg-${color}-600 transition-all`}
    >
      <Icon 
        className={`h-6 w-6 fill-stone-500 dark:fill-stone-200 group-hover/${slug}:fill-stone-50 transition-all`} 
      />
    </button>
  );
}

使用时直接传入图标组件：

<SocialButton 
  url="https://linkedin.com" 
  slug="linkedin" 
  icon={BsLinkedin} 
  color="blue" 
/>

方案2：使用React.cloneElement克隆现有ReactNode #

如果必须保持icon为React.ReactNode类型，可以用React.cloneElement克隆传入的元素节点，合并或覆盖其className属性。注意：此方法仅对单个React元素有效，若传入的是字符串、数字或Fragment等非元素类型，需额外处理兼容。

代码示例：

import { cloneElement, isValidElement } from 'react';

interface Props {
  url: string;
  slug: string;
  icon: React.ReactNode;
  color: string;
}

export default function SocialButton({ url, slug, icon, color }: Props) {
  const openLink = (url: string) => window.open(url, "_blank", "noreferrer");
  const targetClassName = `h-6 w-6 fill-stone-500 dark:fill-stone-200 group-hover/${slug}:fill-stone-50 transition-all`;

  // 克隆元素并合并className
  const renderedIcon = isValidElement(icon) 
    ? cloneElement(icon, {
        className: `${icon.props.className || ''} ${targetClassName}`.trim()
      })
    : icon;

  return (
    <button
      onClick={() => openLink(url)}
      className={`group/${slug} rounded p-2 hover:bg-${color}-600 transition-all`}
    >
      {renderedIcon}
    </button>
  );
}

方案3：通过父元素CSS控制子元素样式 #

利用CSS继承或Tailwind的动态选择器，直接通过按钮的类名控制内部图标的样式，无需修改icon props，适合样式统一的场景。

代码示例（Tailwind动态选择器写法）：

interface Props {
  url: string;
  slug: string;
  icon: React.ReactNode;
  color: string;
}

export default function SocialButton({ url, slug, icon, color }: Props) {
  const openLink = (url: string) => window.open(url, "_blank", "noreferrer");

  return (
    <button
      onClick={() => openLink(url)}
      className={`group/${slug} rounded p-2 hover:bg-${color}-600 transition-all 
        [&>*]:h-6 [&>*]:w-6 [&>*]:fill-stone-500 [&>*]:dark:fill-stone-200 [&>*]:transition-all
        group-hover/${slug}:[&>*]:fill-stone-50`}
    >
      {icon}
    </button>
  );
}

内容的提问来源于stack exchange，提问作者HotFix