React组件className属性异常：控制台正常打印但JSX不生效

你遇到的问题是组件接收到的className能在控制台正常打印，但最终渲染到<button>元素上时未生效。核心原因是多行模板字符串拼接类名时引入了大量不必要的换行和缩进空格，虽浏览器会忽略多余空格，但这种写法易引发隐性拼接问题，同时disabled状态触发时，部分同优先级类名会被覆盖。

方案1：优化模板字符串格式（无额外依赖） #

调整模板字符串写法，移除多余换行，或对拼接后的类名格式化，确保类名间仅保留单个空格：

const ButtonComponent = ({ children, onClick, disabled, className = "" }) => {
  console.log("class name is ", className);

  // 去除首尾空格并将多空格替换为单个空格
  const buttonClassName = `
    bg-green-700 flex hover:bg-green-500 transition duration-300 ease-in-out 
    text-white h-auto text-base p-2 rounded-[5px] m-2 
    ${disabled ? "bg-teal-200 text-teal-800 cursor-not-allowed" : "cursor-pointer"} 
    ${className}
  `.trim().replace(/\s+/g, ' ');

  return (
    <button onClick={onClick} className={buttonClassName} disabled={disabled}>
      {children}
    </button>
  );
};

export default ButtonComponent;

方案2：使用类名合并工具（更可靠） #

推荐用clsx处理条件类名、空值类名等场景，避免手动拼接的问题，若配合tailwind-merge还能解决Tailwind类名优先级冲突：

仅使用clsx #

先安装依赖：

npm install clsx

修改组件代码：

import clsx from 'clsx';

const ButtonComponent = ({ children, onClick, disabled, className = "" }) => {
  console.log("class name is ", className);

  const buttonClassName = clsx(
    "bg-green-700 flex hover:bg-green-500 transition duration-300 ease-in-out text-white h-auto text-base p-2 rounded-[5px] m-2",
    disabled ? "bg-teal-200 text-teal-800 cursor-not-allowed" : "cursor-pointer",
    className
  );

  return (
    <button onClick={onClick} className={buttonClassName} disabled={disabled}>
      {children}
    </button>
  );
};

export default ButtonComponent;

配合tailwind-merge解决类名优先级 #

若使用Tailwind CSS，安装额外依赖处理类名覆盖问题：

npm install clsx tailwind-merge

修改组件代码：

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

const ButtonComponent = ({ children, onClick, disabled, className = "" }) => {
  console.log("class name is ", className);

  const buttonClassName = twMerge(
    clsx(
      "bg-green-700 flex hover:bg-green-500 transition duration-300 ease-in-out text-white h-auto text-base p-2 rounded-[5px] m-2",
      disabled ? "bg-teal-200 text-teal-800 cursor-not-allowed" : "cursor-pointer",
      className
    )
  );

  return (
    <button onClick={onClick} className={buttonClassName} disabled={disabled}>
      {children}
    </button>
  );
};

export default ButtonComponent;

• 手动拼接模板字符串时，换行和缩进会被解析为空格，虽浏览器可处理，但易出现不可控格式问题，trim()和replace(/\s+/g, ' ')可统一类名格式。
• clsx能高效处理条件类名与空值，避免出现空类名项。
• tailwind-merge会自动合并Tailwind类名，解决相同属性类名的优先级覆盖问题。

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