React可复用组件中Props Classes的合并实现方法咨询

我之前也碰到过完全一样的问题！核心原因是你当前的写法里，单独设置的className={classes.label}会覆盖...otherProps里的className属性——JSX中后面的属性会直接覆盖前面的同名属性，所以传入的className根本没生效。

解决方案1：基础字符串拼接（适合简单场景） #

先从props里解构出传入的className，然后和组件内部的classes.label合并，同时用trim()避免空值带来的多余空格：

const CMLabel = ({ classes, children, className, ...otherProps }) => {
  // 合并类名，处理空值情况
  const combinedClassName = `${classes.label} ${className}`.trim();
  
  return (
    <FormLabel
      component="label"
      {...otherProps}
      className={combinedClassName}
    >
      {children}
    </FormLabel>
  );
};

解决方案2：使用clsx库（更健壮的方案） #

如果要处理更复杂的类名场景（比如className为undefined、null，或者需要根据条件添加类名），推荐用clsx这个轻量工具库，它专门用来优雅合并类名：

1. 先安装依赖：

npm install clsx
# 或者用yarn
yarn add clsx

2. 修改组件代码：

import clsx from 'clsx';

const CMLabel = ({ classes, children, className, ...otherProps }) => {
  // clsx会自动过滤掉假值，合并有效类名
  const combinedClassName = clsx(classes.label, className);
  
  return (
    <FormLabel
      component="label"
      {...otherProps}
      className={combinedClassName}
    >
      {children}
    </FormLabel>
  );
};

为什么原来的写法不生效？ #

你之前的代码里，...otherProps确实包含了传入的className，但后面紧接着的className={classes.label}会直接覆盖这个值。JSX的属性赋值规则是后赋值的属性会覆盖先赋值的同名属性，所以必须先把传入的className单独解构出来，合并后再统一赋值给className属性。

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