Button组件buttonClass属性为何覆盖默认className？

问题原因 #

你遇到的核心问题有两个：

1. 默认主题样式被替换而非追加
   你的组件中，buttonClass的默认值btn-secondary dark:btn-accent仅在未传入该属性时生效。一旦传入自定义buttonClass，默认的主题类会被完全替换，导致原有按钮主题样式丢失，这就是你感知到的“原有默认样式被覆盖”。
2. Tailwind类优先级顺序错误
   当前cn工具的参数顺序是buttonClass在前、基础样式btn text-white rounded-lg在后。而Tailwind的样式规则是后声明的类会覆盖前面的同名类，如果用户传入的自定义类和基础样式类冲突（比如自定义圆角类），基础样式会覆盖你的自定义设置，和预期行为相反。

解决方案 #

方案一：拆分属性（推荐，逻辑更清晰）

将主题样式和自定义样式拆分为两个独立属性，避免默认值被替换：

首先修改类型定义：

export type ButtonProps = {
  id?: string | number
  href?: string
  text: string
  onClick?: React.MouseEventHandler<HTMLElement>
  // 新增variant属性控制主题，默认保留原有主题
  variant?: string
  // buttonClass仅用于传入自定义额外样式
  buttonClass?: string
  buttonType?: "submit" | "reset"
}

然后修改组件实现：

import Link from "next/link"
import { ButtonProps } from "types"
import { cn } from "@lib/utils"

const Button = ({
  href,
  text,
  variant = "btn-secondary dark:btn-accent",
  buttonClass = "",
  buttonType
}: ButtonProps) => {
  const baseClasses = "btn text-white rounded-lg"
  
  if (href) {
    return (
      <Link
        href={href}
        className={cn(baseClasses, variant, buttonClass)}
      >
        {text}
      </Link>
    )
  }

  return (
    <button
      type={buttonType}
      className={cn(baseClasses, variant, buttonClass)}
    >
      {text}
    </button>
  )
}

export default Button

调用时只需传入自定义样式即可，默认主题会保留：

<Button
  buttonType="submit"
  text="Versturen"
  buttonClass="rounded-tl-none rounded-tr-none md:rounded-tr-lg md:rounded-bl-none px-7"
/>

方案二：合并默认主题与自定义样式（不修改属性结构）

如果不想调整属性结构，可以直接在cn中合并默认主题和用户传入的样式，确保默认主题不会丢失：

import Link from "next/link"
import { ButtonProps } from "types"
import { cn } from "@lib/utils"

const Button = ({
  href,
  text,
  buttonClass,
  buttonType
}: ButtonProps) => {
  const baseClasses = "btn text-white rounded-lg"
  const defaultVariant = "btn-secondary dark:btn-accent"
  
  if (href) {
    return (
      <Link
        href={href}
        className={cn(baseClasses, defaultVariant, buttonClass)}
      >
        {text}
      </Link>
    )
  }

  return (
    <button
      type={buttonType}
      className={cn(baseClasses, defaultVariant, buttonClass)}
    >
      {text}
    </button>
  )
}

export default Button

关键说明 #

调整cn的参数顺序遵循以下逻辑：

1. 基础样式（baseClasses）：放在最前面，确保组件核心样式（如按钮布局、文字颜色）始终生效。
2. 默认主题样式（defaultVariant）：放在中间，作为按钮默认外观。
3. 用户自定义样式（buttonClass）：放在最后，确保用户的自定义规则可以覆盖前面的任何冲突样式（比如圆角、内边距）。

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