自定义变体

NextUI 允许您为组件创建新的变体，以更好地满足您的项目需求。这可以通过扩展组件及其属性并自定义样式来实现。

您可以创建或覆盖组件 variants、defaultVariants 和 compoundVariants。

注意：对于一次性自定义，请参阅覆盖样式文档。

为非槽组件创建新变体

Button 组件是一个非槽组件，这意味着它没有任何可以自定义的槽。

对于此示例，我们将使用 Button 组件的样式源代码作为参考。转到此处查看样式源代码。

注意：如果您不熟悉变体概念，请参阅 Tailwind 变体文档。

扩展原始组件变体

要创建或覆盖变体，你需要使用 extendVariants 函数。此函数允许你基于原始组件创建一个新组件，并自定义其变体。

// MyButton.tsx
import {extendVariants, Button} from "@nextui-org/react";

export const MyButton = extendVariants(Button, {
  variants: {
    // <- modify/add variants
    color: {
      olive: "text-[#000] bg-[#84cc16]",
      orange: "bg-[#ff8c00] text-[#fff]",
      violet: "bg-[#8b5cf6] text-[#fff]",
    },
    isDisabled: {
      true: "bg-[#eaeaea] text-[#000] opacity-50 cursor-not-allowed",
    },
    size: {
      xs: "px-2 min-w-12 h-6 text-tiny gap-1 rounded-small",
      md: "px-4 min-w-20 h-10 text-small gap-2 rounded-small",
      xl: "px-8 min-w-28 h-14 text-large gap-4 rounded-medium",
    },
  },
  defaultVariants: { // <- modify/add default variants
    color: "olive",
    size: "xl",
  },
  compoundVariants: [ // <- modify/add compound variants
    {
      isDisabled: true,
      color: "olive",
      class: "bg-[#84cc16]/80 opacity-100",
    },
  ],
});

在你的应用中使用你的自定义组件

然后，你现在可以在你的应用中使用你的自定义组件。这里，MyButton 与颜色设置为 olive 以及大小设置为 xl 一起使用。

// App.tsx
import {MyButton} from "./MyButton";

const MyApp = () => {
  return (
    <MyButton color="olive" size="md">
      Press Me
    </MyButton>
  );
};

新组件将包含 Button 组件的原始属性，以及你创建的新变体。

为插槽组件创建新变体

还可以使用 extendVariants 函数为具有插槽的组件添加或覆盖变体。

Input 组件是一个插槽组件，这意味着它具有可以自定义的插槽。

对于此示例，我们将使用 Input 组件的样式源代码作为参考。请点击此处查看样式源代码。

注意：如果您不熟悉变体/插槽的概念，请参阅 Tailwind 变体文档。

扩展原始组件变体

要创建或覆盖变体，你需要使用 extendVariants 函数。此函数允许你基于原始组件创建一个新组件，并自定义其变体。

// MyInput.tsx
import {extendVariants, Input} from "@nextui-org/react";

const MyInput = extendVariants(Input, {
  variants: { // <- modify/add variants
    color: {
      stone: { // <- add a new color variant
        inputWrapper: [ // <- Input wrapper slot
          "bg-zinc-100",
          "border",
          "shadow",
          "transition-colors",
          "focus-within:bg-zinc-100",
          "data-[hover=true]:border-zinc-600",
          "data-[hover=true]:bg-zinc-100",
          "group-data-[focus=true]:border-zinc-600",
          // dark theme
          "dark:bg-zinc-900",
          "dark:border-zinc-800",
          "dark:data-[hover=true]:bg-zinc-900",
          "dark:focus-within:bg-zinc-900",
        ],
        input: [  // <- Input element slot
          "text-zinc-800",
          "placeholder:text-zinc-600",
          // dark theme
          "dark:text-zinc-400",
          "dark:placeholder:text-zinc-600",
        ],
      },
    },
    size: {
      xs: {
        inputWrapper: "h-6 min-h-6 px-1",
        input: "text-tiny",
      },
      md: {
        inputWrapper: "h-10 min-h-10",
        input: "text-small",
      },
      xl: {
        inputWrapper: "h-14 min-h-14",
        input: "text-medium",
      },
    },
    radius: {
      xs: {
        inputWrapper: "rounded",
      },
      sm: {
        inputWrapper: "rounded-[4px]",
      },
    },
    textSize: {
      base: {
        input: "text-base",
      },
    },
    removeLabel: {
      true: {
        label: "hidden",
      },
      false: {},
    },
  },
  defaultVariants: {
    color: "stone",
    textSize: "base",
    removeLabel: true,
  },
});

在你的应用中使用你的自定义组件

然后，您现在可以在应用程序中使用自定义组件。此处，MyInput 与颜色设置为 slate 且大小设置为 xl 一起使用。

// App.tsx
import {MyInput} from "./MyInput";
import {SearchIcon} from "your-icons-library";

const MyApp = () => {
  return (
    <MyInput
      isClearable
      placeholder="Search..."
      radius="md"
      size="md"
      startContent={<SearchIcon className="text-zinc-500" size={16} />}
    />
  );
};

新组件将包含 Input 组件的原始属性，以及您创建的新变体。

所有 NextUI 组件在页面顶部都有 样式源 链接。此链接将带您到组件的样式源代码。在创建自己的自定义组件时，您可以将其用作参考。

类型

主要功能

const Component = extendVariants(BaseComponent, options, config);

/**
 * BaseComponent -> NextUI component to extend
 * options -> the variants to add/modify
 * config -> config to extend the component
 */

选项

type ExtendVariantsOptions = {
  variants?: Record<string, Record<string, ClassValue>>;
  defaultVariants?: Record<string, ClassValue>;
  compoundVariants?: Array<Record<string, string> & ClassProp>;
};

配置

/**
   * Whether to merge the class names with `tailwind-merge` library.
   * It's avoid to have duplicate tailwind classes. (Recommended)
   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
   * @default true
   */
  twMerge?: boolean;
  /**
   * The config object for `tailwind-merge` library.
   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
   */
  twMergeConfig?: TWMergeConfig;

注意：请参阅 Tailwind Merge 配置以了解更多信息。