ui

uiは、Yamada UIのスタイルシステムを有効にしたJSX要素のオブジェクトであり、カスタムコンポーネントがYamada UIのスタイルシステムを受け取るための関数としても使用できます。

使い方

ui.の記法を使用して、スタイルシステムを備えた基本のHTML要素を生成します。
例えば、スタイルシステムを備えたプレーンなHTML要素のbuttonを生成する場合は、と記述します。

編集可能な例

<ui.button
  py="sm"
  px="md"
  rounded="md"
  bg="purple.600"
  color="white"
  _hover={{ bg: "purple.500" }}
>
  Click me!
</ui.button>

Copied!

サポートされている要素は、こちらを参照してください。

Style propsをもっと学びたい場合は、こちらをご覧ください。

コンポーネントを作る

uiは、JSX要素のとJSX要素を返す関数のui('div')と2つの使い方ができます。

関数は、簡単なコンポーネントを生成するのに適しています。

import { ui } from "@yamada-ui/core"

const Button = ui("button")

const Demo = () => {
  return <Button>Click me!</Button>
}

Copied!

デフォルトのスタイルを設定することもできます。

import { ui } from "@yamada-ui/core"

const Button = ui("button", {
  baseStyle: {
    py: "sm",
    px: "md",
    rounded: "md",
    bg: "purple.600",
    color: "white",
    _hover: { bg: "purple.500" },
  },
})

const Demo = () => {
  return <Button>Click me!</Button>
}

Copied!

引数にカスタムコンポーネントを渡し、Yamada UIのスタイルシステムを有効にしたカスタムコンポーネントを生成することもできます。

import { ui } from "@yamada-ui/core"
import { YourComponent } from "./your-component"

const NewComponent = ui(YourComponent)

const Demo = () => {
  return (
    <NewComponent
      py="sm"
      px="md"
      rounded="md"
      bg="purple.600"
      color="white"
      _hover={{ bg: "purple.500" }}
    >
      Click me!
    </NewComponent>
  )
}

Copied!

これは、他のライブラリのコンポーネントにYamada UIのスタイルシステムを使いたい場合に有効です。

もし、カスタムコンポーネントのpropとStyle Propsのpropが重複している場合、propはYamada UIのスタイルシステムに取り込まれ、カスタムコンポーネントに渡されません。もし、propをYamada UIのスタイルシステムに取り込まず、カスタムコンポーネントへ渡したい場合は、disableStylePropを設定します。

const NewComponent = ui(YourComponent, {
  disableStyleProp: (prop) => ["targetProp"].includes(prop),
})

Copied!

`props`の転送を許可する

デフォルトでは、uiはYamada UIのスタイルシステムのpropsをフィルタリングしてDOMに取り込まれます。どのように、どのpropを転送するかを制御する場合は、shouldForwardPropを設定します。

これは、targetPropを除いたすべてのprop(Yamada UIのスタイルシステムのpropsを含む)を許可する簡単な例です。

const NewComponent = ui(YourComponent, {
  shouldForwardProp: (prop) => !["targetProp"].includes(prop),
})

Copied!

また、Yamada UIのデフォルトのshouldForwardPropと組み合わせた例です。

import { ui, shouldForwardProp } from "@yamada-ui/core"

const NewComponent = ui(YourComponent, {
  shouldForwardProp: (prop) => {
    const isUIProps = !shouldForwardProp(prop)

    if (isUIProps) return false

    return !["targetProp"].includes(prop)
  },
})

Copied!

GitHubでこのページを編集する

前通知次インターポレーション

ui

コンポーネントを作る

propsの転送を許可する

`props`の転送を許可する