---
title: styled
description: "`styled`関数は、propsを使用してスタイリングを可能にするJSX要素を生成します。"
---

## 概要

`styled`は、[Style Props](https://yamada-ui.com/docs/styling/style-props.md)を有効にしたJSX要素のオブジェクトであり、カスタムコンポーネントが[Style Props](https://yamada-ui.com/docs/styling/style-props.md)を受け取るための関数としても使用できます。

## 使い方

`styled.<element>`の記法を使用して、[Style Props](https://yamada-ui.com/docs/styling/style-props.md)を備えたHTML要素を生成します。

例えば、[Style Props](https://yamada-ui.com/docs/styling/style-props.md)を備えたHTML要素の`button`を生成する場合は、`<ui.button />`と記述します。

```tsx
<styled.button />
```

### コンポーネントを作成する

`styled`は、JSX要素の`<styled.div />`とJSX要素を返す関数の`styled('div')`と2つの使い方ができます。

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

```tsx
import { styled } from "@workspaces/ui"

const Button = styled("button")

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

引数にカスタムコンポーネントを渡し、[Style Props](https://yamada-ui.com/docs/styling/style-props.md)を有効にしたカスタムコンポーネントを生成することもできます。

```tsx
import { styled } from "@workspaces/ui"
import { YourComponent } from "./your-component"

const NewComponent = styled(YourComponent)

const App = () => {
  return <NewComponent fontSize="lg" />
}
```

### スタイリングする

コンポーネントにデフォルトのスタイルを設定したり、`variant`や`size`などの条件に応じたスタイルを設定することができます。

#### ベーススタイル

ベーススタイルは、コンポーネントのデフォルトのスタイルを設定します。

```tsx
const Button = styled("button", {
  base: {
    alignItems: "center",
    appearance: "none",
    cursor: "pointer",
    display: "inline-flex",
    fontWeight: "medium",
    justifyContent: "center",
    overflow: "hidden",
    position: "relative",
    rounded: "l2",
    transitionDuration: "moderate",
    transitionProperty: "common",
    userSelect: "none",
    verticalAlign: "middle",
    whiteSpace: "nowrap",
    _readOnly: { layerStyle: "readOnly" },
    _disabled: { layerStyle: "disabled" },
  },
})
```

#### バリアントスタイル

バリアントスタイルは、コンポーネントの`variant`に応じたスタイルを設定します。

```tsx
const Button = styled("button", {
  variants: {
    outline: {
      layerStyle: "outline",
      _hover: { layerStyle: "outline.hover" },
    },
    solid: {
      layerStyle: "solid",
      _hover: { layerStyle: "solid.hover" },
    },
    subtle: {
      layerStyle: "subtle",
      _hover: { layerStyle: "subtle.hover" },
    },
  },
})
```

バリアントスタイルを適用する場合は、`variant`に値を設定します。

```tsx
<Button variant="solid" />
```

または、`defaultProps`の`variant`に値を設定します。

```tsx
const Button = styled("button", {
  defaultProps: {
    variant: "solid",
  },
})
```

#### サイズスタイル

サイズスタイルは、コンポーネントの`size`に応じたスタイルを設定します。

```tsx
const Button = styled("button", {
  sm: {
    fontSize: "sm",
    gap: "2",
    h: "9",
    lineHeight: "{sizes.9}",
    minW: "9",
    px: "3",
    _icon: { fontSize: "md" },
  },
  md: {
    fontSize: "md",
    gap: "2",
    h: "10",
    lineHeight: "{sizes.10}",
    minW: "10",
    px: "3",
    _icon: { fontSize: "lg" },
  },
  lg: {
    fontSize: "lg",
    gap: "2.5",
    h: "11",
    lineHeight: "{sizes.11}",
    minW: "11",
    px: "4",
    _icon: { fontSize: "2xl" },
  },
})
```

サイズスタイルを適用する場合は、`size`に値を設定します。

```tsx
<Button size="sm" />
```

または、`defaultProps`の`size`に値を設定します。

```tsx
const Button = styled("button", {
  defaultProps: {
    size: "sm",
  },
})
```

#### プロップススタイル

プロップススタイルは、コンポーネントのpropsに応じたスタイルを設定します。

```tsx
const Button = styled("button", {
  props: {
    fullRounded: {
      true: { rounded: "full" },
    },
  },
})
```

プロップススタイルを適用する場合は、設定したpropsに値を設定します。

```tsx
<Button fullRounded />
```

または、`defaultProps`の設定したpropsに値を設定します。

```tsx
const Button = styled("button", {
  defaultProps: {
    fullRounded: true,
  },
})
```

#### コンポジットスタイル

コンポジットスタイルは、コンポーネントの[バリアントスタイル](https://yamada-ui.com/docs/components/styled.md#バリアントスタイル)や[サイズスタイル](https://yamada-ui.com/docs/components/styled.md#サイズスタイル)など、複数の条件に応じたスタイルを設定します。

これは、`variant`が`"solid"`かつ`fullRounded`が`true`の場合に、追加のスタイルを設定する例です。

```tsx
const Button = styled("button", {
  compounds: [
    {
      variant: "solid",
      fullRounded: true,
      css: {
        /* Additional styles */
      },
    },
  ],
})
```

配列を設定することで、複数の条件にマッチングします。
これは、`variant`が`"solid"`または`"subtle"`かつ`fullRounded`が`true`の場合に、追加のスタイルを設定する例です。

```tsx
const Button = styled("button", {
  compounds: [
    {
      variant: ["solid", "subtle"],
      fullRounded: true,
      css: {
        /* Additional styles */
      },
    },
  ],
})
```

正規表現を使用することも可能です。

```tsx
const Button = styled("button", {
  compounds: [
    {
      variant: /^solid|subtle$/,
      fullRounded: true,
      css: {
        /* Additional styles */
      },
    },
  ],
})
```

### classNameを設定する

```tsx
const Button = styled("button", {
  className: "button",
})
```

### displayNameを設定する

```tsx
const Button = styled("button", {
  displayName: "Button",
})
```

### propsを転送する

`styled`は、[Style Props](https://yamada-ui.com/docs/styling/style-props.md)をフィルタリングして、提供されたコンポーネントまたはHTML要素にpropsを転送します。どのpropsを転送するかを設定する場合は、`forwardProps`または`shouldForwardProp`を設定します。

例えば、`YourComponent`に`transition`を転送する場合は、`forwardProps`に`["transition"]`を設定します。これは、[Style Props](https://yamada-ui.com/docs/styling/style-props.md)と`YourComponent`のpropsが競合した場合に有効な手段です。

```tsx
const Button = styled(YourComponent, {
  forwardProps: ["transition"],
})
```