React/Tailwind组件传入className无法覆盖默认类的问题

Tailwind中相同优先级的工具类，后声明的会覆盖先声明的。你的代码核心问题在于类的合并逻辑，以下是具体解决方法：

1. 确保自定义className处于类列表最后 #

当前代码中cx(classes.base, classes.variant[variant], className)的顺序是正确的，但如果使用的cx工具（如clsx/classnames）存在拼接异常，可改用模板字符串直接验证：

className={`${classes.base} ${classes.variant[variant]} ${className || ''}`}

2. 避免props意外覆盖className #

虽然你已解构出className，但如果props中仍包含className属性（比如调用时重复传入），...props会覆盖你设置的类名。可以合并所有来源的className：

const Button = ({
  children,
  type = 'button',
  className: customClassName,
  variant = 'solid',
  disabled = false,
  onClick,
  ...props
}: ButtonType) => {
  const { className: propsClassName } = props;
  const finalClassName = cx(classes.base, classes.variant[variant], customClassName, propsClassName);
  
  return (
    <button
      disabled={disabled}
      type={type}
      onClick={onClick}
      className={finalClassName}
      {...props}
    >
      {children}
    </button>
  )
}

3. 兜底方案：强制优先级（不推荐） #

如果某些样式仍无法覆盖，可在自定义类后添加!前缀（Tailwind重要性修饰符）：

<Button className='!px-4 !py-0'/>

修正后的完整代码示例 #

import clsx from 'clsx';

const classes = {
  base: 'rounded-3xl px-6 py-2',
  disabled: '',
  variant: {
    solid: 'bg-blue-700 text-white hover:bg-opacity-95',
    outline: 'border border-blue-800 text-blue-900',
  },
}

const Button = ({
  children,
  type = 'button',
  className,
  variant = 'solid',
  disabled = false,
  onClick,
  ...props
}: ButtonType) => {
  const finalClassName = clsx(classes.base, classes.variant[variant], className);
  
  return (
    <button
      disabled={disabled}
      type={type}
      onClick={onClick}
      className={finalClassName}
      {...props}
    >
      {children}
    </button>
  )
}

// 使用方式
<Button className='px-4 py-0'/>

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