---
title: テキストスタイル
description: "テキストスタイルをカスタマイズする方法を学ぶ。"
---

## 概要

テキストスタイルは、プロジェクト全体でテキストのスタイルを再利用するために使用されるトークンです。

テーマに定義されているスタイルは[こちら](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/styles/text-styles.ts)です。

```tsx
<Text textStyle="mono">Mono</Text>
```

```tsx
export const textStyles = defineStyles.textStyle({
  ghost: {
    color: "colorScheme.outline",
  },
  mono: {
    fontFamily: "mono",
    fontWeight: "medium",
    letterSpacing: "widest",
    whiteSpace: "nowrap",
  },
  outline: {
    color: "colorScheme.outline",
  },
  solid: {
    color: "colorScheme.contrast",
  },
  subtle: {
    color: "colorScheme.fg",
  },
  surface: {
    color: "colorScheme.fg",
  },
})
```

## カスタマイズ

### テーマを生成する

[CLI](https://yamada-ui.com/docs/theming/cli.md)を使用してテーマを生成します。

:::warning
下記のコマンドを実行する前に、`@yamada-ui/cli`をインストールして`init`コマンドを実行する必要があります。詳しくは、[こちら](https://yamada-ui.com/docs/get-started/cli.md)をご覧ください。
:::

```bash
pnpm yamada-cli theme
```

```bash
npm yamada-cli theme
```

```bash
yarn yamada-cli theme
```

```bash
bun yamada-cli theme
```

### スタイルを変更する

生成したテーマの`styles/text-styles.ts`を変更します。

```tsx
import { defineStyles } from "@yamada-ui/react"

export const textStyles = defineStyles.textStyle({
  gradient: {
    bgClip: "text",
    bgGradient: "linear(to-l, #7928CA, #FF0080)",
    fontSize: "5xl",
    w: "full",
  },
  ghost: {
    color: "colorScheme.outline",
  },
  mono: {
    fontFamily: "mono",
    fontWeight: "medium",
    letterSpacing: "widest",
    whiteSpace: "nowrap",
  },
  outline: {
    color: "colorScheme.outline",
  },
  solid: {
    color: "colorScheme.contrast",
  },
  subtle: {
    color: "colorScheme.fg",
  },
  surface: {
    color: "colorScheme.fg",
  },
})
```

### プロバイダーを更新する

生成したテーマを`UIProvider`に設定します。

```tsx
import { UIProvider } from "@workspaces/ui"
import { theme } from "@workspace/theme"

const App = () => {
  return (
    <UIProvider theme={theme}>
      <YourApplication />
    </UIProvider>
  )
}
```

### テキストスタイルを使う

`textStyle`に値を設定します。

```tsx
<Text textStyle="gradient" />
```