当我使用 tailwindcss 时，扩展运算符不起作用

Posted 2023-03-07

【中文标题】当我使用 tailwindcss 时，扩展运算符不起作用

【英文标题】：Spread operator not work when I use tailwindcss

【发布时间】：2021-11-04 18:34:01

【问题描述】：

你好吗？希望一切顺利！

我在 Tailwindcss 中遇到了一个相当奇怪的问题，当我关闭组件的范围并获得 ...rest 之类的道具时，className 无法正常工作，例如：

import  ButtonhtmlAttributes  from 'react';

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

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

这就是组件，现在我想在调用父组件时使用className。

<Button title="Sign up" className="bg-purple-500" />

但这不起作用，在这种情况下，我的按钮没有颜色purple

【参考方案1】：

好的，所以您基本上是在第 13 行设置了一个新的 className 属性，从而覆盖了 ...rest 传播中的 className 属性。应该是这样的：

import  ButtonHTMLAttributes  from 'react';

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

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

现在这样，无论您在组件中传递的 className 属性将首先被添加，然后如果 backgroundLowOpacity 也被传递，您的短路将被评估。

【讨论】：

不客气@AndresdoSantos。您应该将我的答案标记为已接受:)