组件复用

宏组件主包提供 useExtend() 和 useVariant()，用于基于已有组件派生新组件。

useExtend

import { useExtend } from "@elfui/core";
import { Button } from "./Button";

export const PrimaryButton = useExtend(Button)
  .name("primary-button")
  .style(`:host { --button-color: var(--elf-color-primary); }`)
  .build();

useExtend() 会复制原组件定义，然后允许你改 tag、追加样式，再 build 或 register。

useVariant

import { useVariant } from "@elfui/core";
import { Button } from "./Button";

export const DangerButton = useVariant(Button, "danger-button", (builder) => {
  builder.style(`:host { --button-color: var(--elf-color-danger); }`);
}).build();

什么时候使用

WARNING

适合做设计系统里的变体组件，比如 PrimaryButton、DangerButton、CompactTable。如果只是传一个 prop 就能解决，不要派生新组件。