---
title: カスケードレイヤー
description: "CSSカスケードレイヤーは、CSSルールが要素に適用される順序を管理するための機能です。"
---

## 概要

Yamada UIは、CSSの[カスケードレイヤー](https://developer.mozilla.org/ja/docs/Web/CSS/@layer)を使用して、[テーマ](https://yamada-ui.com/docs/theming.md)と[Style Props](https://yamada-ui.com/docs/styling/style-props.md)に優先順位を設定しています。この優先順位は、コンポーネントのスタイリングをする上で重要な役割を果たします。

## レイヤーの種類

レイヤーの種類は、以下の通りです。

- `tokens`: [テーマ](https://yamada-ui.com/docs/theming.md)のトークン。
- `reset`: [リセットスタイル](https://yamada-ui.com/docs/styling/reset-styles.md)。
- `global`: [グローバルスタイル](https://yamada-ui.com/docs/styling/global-styles.md)。
- `base`: コンポーネントの[ベーススタイル](https://yamada-ui.com/docs/components/styled.md#ベーススタイル)。
- `size`: コンポーネントの[サイズスタイル](https://yamada-ui.com/docs/components/styled.md#サイズスタイル)。
- `variant`: コンポーネントの[バリアントスタイル](https://yamada-ui.com/docs/components/styled.md#バリアントスタイル)。
- `props`: コンポーネントの[プロップススタイル](https://yamada-ui.com/docs/components/styled.md#プロップススタイル)。
- `compounds`: コンポーネントの[コンポジットスタイル](https://yamada-ui.com/docs/components/styled.md#コンポジットスタイル)。

## レイヤーの順序

生成されるレイヤーの順序は、以下の通りです。この優先順位を基にして、同じプロパティは上書きされていきます。

```css
@layer tokens, reset, global, base, size, variant, props, compounds;
```

:::note
[Style Props](https://yamada-ui.com/docs/styling/style-props.md)は、レイヤーが設定されていないので、[!important](https://developer.mozilla.org/ja/docs/Web/CSS/important)が付与されていない限り、常に優先されます。
:::

## カスタマイズ

### テーマを生成する

[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
```

### コンフィグを変更する

生成したテーマの`config.ts`を変更します。

```tsx
import type { LayersConfig } from "@yamada-ui/react"
import { defineConfig } from "@yamada-ui/react"

export const layers: LayersConfig = {
  tokens: { name: "tokens", order: 0 },
  reset: { name: "reset", order: 1 },
  global: { name: "global", order: 2 },
  base: { name: "base", order: 3 },
  size: { name: "size", order: 4 },
  variant: { name: "variant", order: 5 },
  props: { name: "props", order: 6 },
  compounds: { name: "compounds", order: 7 },
}

export const config = defineConfig({
  css: { layers, varPrefix: "ui" },
  breakpoint: { direction: "down", identifier: "@media screen" },
  defaultColorMode: "dark",
  defaultThemeScheme: "base",
  notice: { duration: 5000 },
  theme: { responsive: true },
})
```

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

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

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

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

## 無効にする

カスケードレイヤーを無効にする場合は、`css.layers`に`false`にします。

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

export const config = defineConfig({
  css: { layers: false, varPrefix: "ui" }, // [!code highlight]
  breakpoint: { direction: "down", identifier: "@media screen" },
  defaultColorMode: "dark",
  defaultThemeScheme: "base",
  notice: { duration: 5000 },
  theme: { responsive: true },
})
```