如何使用 clsx 正确加入顺风 css 类？

Posted 2023-03-07

【中文标题】如何使用 clsx 正确加入顺风 css 类？

【英文标题】：How to properly join tailwind css classes using clsx?

【发布时间】：2021-11-22 04:15:09

【问题描述】：

我正在尝试加入顺风课程并使用clsx 将它们应用于按钮。默认应用一个类'rounded-none'，另一个作为prop传入

const Button = (
  children, ...props
): JSX.Element => 

  return (
    <ADButton
      className=clsx('rounded-none', props.className)
      ...props
    >
      children
    </ADButton>
  );
;

假设我已将padding-top: 0px; 添加到按钮中，如下所示

<Button
  color="primary"
  className="pt-0"
>
  t('btn.add')
</Button>

加入的类名应该类似于'rounded-none pt-0'。如果没有传递 className prop，则只需应用“rounded-none”

现在遇到的问题是“rounded-none”仅适用于没有 className 属性的按钮。在带有 className 属性的按钮上，只有 className 属性被应用，但没有“rounded-none”。我该如何解决这个问题，以便将两个类加入并应用于按钮？

【参考方案1】：

您遇到此问题是因为ADButton 的默认属性设置为className，而您传递给按钮组件的额外属性也设置为className。实际上，您使用新传递的 className 属性覆盖默认 className。如果有 2 个类似命名的 props，React 将选择稍后在发生冲突时声明的那个。

所以这个：

<ADButton
      className=clsx('rounded-none', 'pt-0')
// I am declared later so I win
      className='pt-0'
    >
      children
    </ADButton>

变成：

<ADButton
      className="pt-0"
    >
      children
    </ADButton>

这里有一个解决方案：

const Button = (
  children, ...props
) => 
  const  classNameDestructured = "", ...rest  = props;
  return (
    <ADButton
      className=clsx('rounded-none', classNameDestructured)
      ...rest
    >
      children
    </ADButton>
  );
;

您解构props 并为classNameDestructured 设置默认值。这允许您在没有额外道具的情况下声明Button：

<Button>
  t('btn.add')
</Button>

然后将classNameDestructured 作为参数传递给clsx() 函数。然后将您的其他类加入并应用于按钮。

之所以有效，是因为 className 不再在 ADButton 中声明为道具两次，因此我们消除了 覆盖 冲突。