React自定义组件透传className时默认类名被覆盖如何解决

• JSX属性遵循后定义优先级更高的规则，同名属性会被后面写入的值覆盖。
• 你当前的代码先给Link设置了拼接好的className={classes}，之后才展开{...props}。虽然你提前从props里解构出了className用于拼接，但解构操作只是读取属性值，不会修改原始props对象，所以展开props时，外部传入的className: "cs_breadcrumb"依然会被注入到Link上，直接覆盖掉前面设置好的拼接类名。
• 你在组件内打印classes能拿到正确值，是因为变量本身的拼接逻辑没问题，只是渲染到DOM节点时属性被后续展开的内容覆盖了。

推荐写法：透传属性时剔除已受控的属性 #

封装组件时，把需要自己控制的prop从原始props里解构出来，剩余属性用rest参数收集后再透传，从根源避免属性冲突：

// Breadcrumb.js
export const Breadcrumb = (props) => {
  // 单独提取className，其余属性统一存在restProps中，不再包含className
  const { className, ...restProps } = props;
  const classes = getClasses(className);

  return (
    <Link className={classes} {...restProps}>
      {restProps.children}
    </Link>
  );
};

这种写法是React通用组件封装的标准实践，不会出现属性意外覆盖的问题，也不需要额外调整属性顺序。

快速修复：调整属性书写顺序 #

如果不想改动解构逻辑，直接把{...props}移到所有受控属性的前面，保证自己控制的属性最后写入、优先级最高即可：

export const Breadcrumb = (props) => {
  const { className } = props;
  const classes = getClasses(className);

  return (
    // 先透传外部props，再写入内部控制的属性，后者会覆盖同名的外部传入值
    <Link {...props} className={classes}>
      {props.children}
    </Link>
  );
};

注意这个写法下，所有你需要自定义逻辑的属性（比如这里的className，还有如果后续要加拦截点击的onClick、自定义跳转逻辑的to等），都必须放到{...props}的后面，否则还是会被外部传入的同名属性覆盖。

• 手动拼接类名容易出现多余空格、空类名的问题，推荐用轻量库clsx处理类名合并，你的样式逻辑可以简化为：

// Breadcrumb.style.js
import clsx from 'clsx';

const getDefaultClasses = () => clsx('ps-3', 'fs-3', 'fw-bold', 'text-decoration-none');

export const getClasses = (extra = "") => clsx(getDefaultClasses(), extra);

后续如果要加条件类名（比如激活状态加特殊样式），直接在clsx里写条件判断即可，比字符串拼接维护性高很多。

• 组件如果需要支持外部传入自定义属性，永远把内部受控的属性放在透传展开的后面，保证内部逻辑的优先级，避免出现预期外的行为。

内容的提问来源于stack exchange，提问作者ro-pal