使用Tailwind CSS时扩展运算符透传的className属性不生效如何解决？

你的代码存在两个问题导致透传的className不生效：

• 属性覆盖：你在<button>标签上先展开了...rest，透传的className会先被挂载，但后续显式声明的className属性优先级更高，直接覆盖了透传的类名，导致传入的bg-purple-500被丢弃
• 未做类名合并：你没有将组件内部的逻辑类名和透传的外部类名做拼接，即使调整属性顺序也只会生效其中一类样式

基础方案：手动拼接类名 #

直接将透传的className从rest中解构出来，和内部类名拼接即可，同时调整属性顺序避免内置属性被透传覆盖：

import { ButtonHTMLAttributes } from 'react';

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  title: string;
  backgroundLowOpacity?: boolean;
};

export function Button({ title, backgroundLowOpacity, className, ...rest }: ButtonProps) {
  return (
    <button
      type="button"
      className={`${backgroundLowOpacity ? 'bg-gray-100' : ''} ${className || ''}`}
      {...rest}
    >
      {title}
    </button>
  );
}

进阶方案：解决类名冲突 #

如果需要避免内部类名和外部透传类名的同属性冲突（比如同时存在两个背景色类名），可以使用tailwind-merge工具自动合并冲突类名，默认保留靠后的外部类名优先级：

1. 安装依赖：npm install tailwind-merge
2. 调整组件代码：

import { ButtonHTMLAttributes } from 'react';
import { twMerge } from 'tailwind-merge';

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  title: string;
  backgroundLowOpacity?: boolean;
};

export function Button({ title, backgroundLowOpacity, className, ...rest }: ButtonProps) {
  return (
    <button
      type="button"
      className={twMerge(
        backgroundLowOpacity && 'bg-gray-100',
        className
      )}
      {...rest}
    >
      {title}
    </button>
  );
}

修改完成后，父组件传入的bg-purple-500即可正常生效。

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