カスケードレイヤー

概要

Yamada UIは、CSSのカスケードレイヤーを使用して、テーマとStyle Propsに優先順位を設定しています。この優先順位は、コンポーネントのスタイリングをする上で重要な役割を果たします。

レイヤーの種類

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

• tokens: テーマのトークン。
• reset: リセットスタイル。
• global: グローバルスタイル。
• base: コンポーネントのベーススタイル。
• size: コンポーネントのサイズスタイル。
• variant: コンポーネントのバリアントスタイル。
• props: コンポーネントのプロップススタイル。
• compounds: コンポーネントのコンポジットスタイル。

レイヤーの順序

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

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

カスタマイズ

• 1

  テーマを生成する

  CLIを使用してテーマを生成します。

  下記のコマンドを実行する前に、@yamada-ui/cliをインストールしてinitコマンドを実行する必要があります。詳しくは、こちらをご覧ください。

  pnpmnpmyarnbun

  pnpm yamada-cli theme
  

• 2

  コンフィグを変更する

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

  theme/config.ts

  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 },
  })
  

• 3

  プロバイダーを更新する

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

  import { UIProvider } from "@workspaces/ui"
  import { theme, config } from "@workspace/theme"
  
  const App = () => {
    return (
      <UIProvider theme={theme} config={config}>
        <YourApplication />
      </UIProvider>
    )
  }
  

無効にする

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

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

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