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

【问题标题】：How to properly join tailwind css classes using clsx?如何使用 clsx 正确加入顺风 css 类？
【发布时间】：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”。我该如何解决这个问题，以便将两个类加入并应用于按钮？

【问题讨论】：

标签： reactjs tailwind-css

【解决方案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 中声明为道具两次，因此我们消除了覆盖冲突。

【讨论】：