如何在可重用组件中传递prop给变量

Question

这是我第一次尝试创建一个类似于ui框架的可重用组件。我用顺风来做造型。我创建了按钮变体。初级的，次级的，破坏性的。它工作得很好。但是，我想添加选择组件颜色的功能。但是，我找不到解决方案或弄清楚如何将颜色传递给BUTTON_VARIANT。

我如何传递一个颜色道具BUTTON_VARIANT?

import classNames from "classnames";
type ButtonVariant = `primary` | `secondary` | `destructive`;
type ColorVariant = "slate" | "red";
interface Props {
children: any;
variant?: ButtonVariant;
className: any;
color: ColorVariant;
}
const BUTTON_VARIANT: { [key in ButtonVariant]: String } = {
destructive: `text-white bg-red-500 hover:bg-red-600 capitalize font-semibold`,
primary: `text-white bg-blue-500 font-semibold hover:bg-blue-600 capitalize`,
secondary: `text-blue-500 bg-blue-100 font-semibold capitalize hover:bg-blue-100 hover:text-blue-700`,
};
export const Button = ({
children,
variant = "primary",
className,
color,
}: Props) => {
return (
<button
className={classNames(
className,
`rounded py-2 px-4`,
BUTTON_VARIANT[variant],
className
)}
>
{children}
</button>
);
};
Button.defaultProps = {
className: "",
variant: "primary",
color: "blue",
};

Answer 1

您需要从BUTTON_VARIANT的样式中取出所有涉及颜色(背景，边框，文本等)的类，并创建COLORS_VARIANT对象。但是，请记住，这可能会使您的变体属性变得无用。主按钮是红色的，或者破坏性的按钮是蓝色的，这是没有意义的。

我建议，如果您希望使用color作为变体，请将您的variant道具名称切换为与颜色无关，例如solid|transparent|outline等。