グローバルスタイル

グローバルスタイルは、テーマのstyles.globalStyleで定義されているスタイルを反映するコンポーネントです。

グローバルスタイルのコンポーネントは、UIProviderのなかに含まれています。

実際に定義されている値はこちらです。

global-style.ts

export const globalStyle: UIStyle = {
  body: {
    fontFamily: "body",
    bg: ["white", "black"],
    color: ["black", "white"],
    transitionProperty: "background-color",
    transitionDuration: "normal",
    lineHeight: "base",
    overflowX: "hidden",
  },
  "*::placeholder": {
    color: "gray.500",
  },
  _dark: {
    "*::placeholder": {
      color: "whiteAlpha.400",
    },
  },
  "*, *::before, &::after": {
    borderWidth: "0",
    borderStyle: "solid",
    borderColor: "border",
    wordWrap: "break-word",
  },
}

Copied!

グローバルスタイルをカスタマイズする

テーマのstyles.globalStyleを変更するだけ、グローバルスタイルはカスタマイズできます。

styles.globalStyleは、スタイルオブジェクトまたはスタイルオブジェクトを返す関数を定義できます。

import { UIProvider, extendTheme, UIStyle } from "@yamada-ui/react"

const globalStyle: UIStyle = {
  body: {
    bg: "red.600",
    color: "white",
  },
}

const customTheme = extendTheme({ styles: { globalStyle } })()

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

Copied!

関数の場合は、themeとcolorModeを取得できます。

import { UIProvider, extendTheme, UIStyle } from "@yamada-ui/react"

const globalStyle: UIStyle = ({ theme, colorMode }) => ({
  body: {
    bg: "red.600",
    color: "white",
  },
})

const customTheme = extendTheme({ styles: { globalStyle } })()

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

Copied!

テーマをもっと学びたい場合は、テーマをカスタマイズするやコンポーネントのスタイルをご覧ください。

グローバルスタイルを追加する

インストールで個別や最小限を選択して、@yamada-ui/coreをインストールしている場合、グローバルスタイルのコンポーネントは呼び出されていません。

グローバルスタイルを使いたい場合は、次の3つのことを行う必要があります。

アプリケーションのルートにThemeProviderを追加する。
GlobalStyleを追加する。
グローバルスタイルを定義し、ThemeProviderのthemeに渡す。

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

const globalStyle: UIStyle = {
  body: {
    bg: ["white", "black"],
    color: ["black", "white"],
  },
}

const App = () => {
  return (
    <ThemeProvider theme={{ styles: { globalStyle } }}>
      <GlobalStyle />

      <YourApplication />
    </ThemeProvider>
  )
}

Copied!

デフォルトのテーマのグローバルスタイルを使いたい場合は、@yamada-ui/themeをインストールした後、defaultThemeかbaseThemeをThemeProviderに渡します。

pnpm add @yamada-ui/theme

Copied!

import { ThemeProvider, GlobalStyle } from "@yamada-ui/core"
import { defaultTheme, baseTheme } from "@yamada-ui/theme"

const App = () => {
  return (
    // `defaultTheme` or `baseTheme`
    <ThemeProvider theme={baseTheme}>
      <GlobalStyle />

      <YourApplication />
    </ThemeProvider>
  )
}

Copied!

defaultThemeは、コンポーネントのスタイルなど、すべてのトークンが定義されています。
baseThemeは、グローバルスタイルやカラーなどのトークンは定義されていますが、コンポーネントのスタイルが定義されていません。

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

前インターポレーション次リセットスタイル