カスタムバリアント

NextUIでは、プロジェクトのニーズに合わせてコンポーネントの新しいバリアントを作成できます。これは、コンポーネントとそのプロパティを拡張し、スタイルをカスタマイズすることで行えます。

コンポーネントのvariants、defaultVariants、およびcompoundVariantsを作成またはオーバーライドできます。

注: 一度限りのカスタマイズについては、スタイルをオーバーライドのドキュメントを参照してください。

スロットを持たないコンポーネントの新しいバリアントの作成

ボタンコンポーネントは、カスタマイズできるスロットを持たない、スロットを持たないコンポーネントです。

この例では、Buttonコンポーネントのスタイルのソースコードを参考にします。スタイルソースコードを表示するにはこちらを参照してください。

注: バリアントの概念に馴染みがない場合は、Tailwind Variants のドキュメントを参照してください。

元のコンポーネントのバリアントを拡張する

バリアントを作成またはオーバーライドするには、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 は、色が オリーブ に設定され、サイズが xl に設定されて使用されています。

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

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

新しいコンポーネントには、Button コンポーネントの元のプロパティに加えて、作成した新しいバリアントが含まれます。

スロットコンポーネントの新しいバリアントを作成する

extendVariants 関数を使用して、スロットを持つコンポーネントのバリアントを追加またはオーバーライドすることもできます。

Input コンポーネントはスロットコンポーネントであり、カスタマイズ可能なスロットがあります。

この例では、Input コンポーネントのスタイルソースコードを参考として使用します。スタイルソースコードを表示するには、こちらを参照してください。

注: バリアント/スロットの概念に馴染みがない場合は、Tailwind Variants のドキュメントを参照してください。

元のコンポーネントのバリアントを拡張する

// 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 は、色が スレート に設定され、サイズが 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 Config を参照してください。