将尾风班级作为React的道具

发布于 2025-01-23 23:57:46 字数 792 浏览 4 评论 0原文

我正在创建一个可重复使用的组件按钮，我想通过该按钮将两个尾风类作为道具，并动态使用它们。

这是我的组成部分：

function Button({ primary, secondry, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={`bg-${primary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 border-${primary} hover:bg-${secondry} hover:text-${primary} cursor-pointer duration-300`}
    >
      {label}
    </button>
  );
}

这是我使用该组件的方式：

<Button
label={"Cancel"}
primary="red-700"
secondry="zinc-900"
onClick={(e) => navigate("/customers")}
/>

但是，这些类并未应用。这就是外观：

原文

I am creating a reusable component button to which I want to pass two Tailwind classes as props and use them dynamically.

Here is my component:

function Button({ primary, secondry, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={`bg-${primary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 border-${primary} hover:bg-${secondry} hover:text-${primary} cursor-pointer duration-300`}
    >
      {label}
    </button>
  );
}

This is how I am using the component:

<Button
label={"Cancel"}
primary="red-700"
secondry="zinc-900"
onClick={(e) => navigate("/customers")}
/>

However, the classes are not being applied. This is how it looks:

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少女的英雄梦 2025-01-30 23:57:46

尝试传递整个字符串bg-red-700这样

function Button({ bgprimary, textprimary, borderprimary, bgsecondary, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={`${bgprimary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 ${borderprimary} hover:${bgsecondary} hover:${textprimary} cursor-pointer duration-300`}
    >
      {label}
    </button>
  );
}

这样

<Button
label={"Cancel"}
bgprimary="bg-red-700"
textprimary="text-red-700"
borderprimary="border-red-700"
bgsecondary="bg-zinc-900"
onClick={(e) => navigate("/customers")}
/>

Try to pass the whole string bg-red-700 like this like this

function Button({ bgprimary, textprimary, borderprimary, bgsecondary, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={`${bgprimary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 ${borderprimary} hover:${bgsecondary} hover:${textprimary} cursor-pointer duration-300`}
    >
      {label}
    </button>
  );
}

And use it like

<Button
label={"Cancel"}
bgprimary="bg-red-700"
textprimary="text-red-700"
borderprimary="border-red-700"
bgsecondary="bg-zinc-900"
onClick={(e) => navigate("/customers")}
/>

回复收藏 0 原文

路还长，别太狂 2025-01-30 23:57:46

使用tailwind-merge和clsx软件包您可以实现此处：

创建一个实用程序cn这样的功能，然后在需要使用的任何地方导入此信息。

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

这样使用：

function Button({ primary, secondary, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={cn(
        `bg-${primary}`,
        "py-0.5",
        "px-3",
        "rounded",
        "text-white",
        "font-semibold",
        "text-xl",
        "border-2",
        `border-${primary}`,
        `hover:bg-${secondary}`,
        `hover:text-${primary}`,
        "cursor-pointer",
        "duration-300",
      )}
    >
      {label}
    </button>
  );
}

Using tailwind-merge and clsx packages you can achieve this:

Create a utility cn function like this and then import this wherever you need to use it.

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Use it like this:

function Button({ primary, secondary, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={cn(
        `bg-${primary}`,
        "py-0.5",
        "px-3",
        "rounded",
        "text-white",
        "font-semibold",
        "text-xl",
        "border-2",
        `border-${primary}`,
        `hover:bg-${secondary}`,
        `hover:text-${primary}`,
        "cursor-pointer",
        "duration-300",
      )}
    >
      {label}
    </button>
  );
}

回复收藏 0 原文