Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

コンフィグをカスタマイズする

コンフィグをカスタマイズすることで、カラーモードやCSSカスタムプロパティのプレフィックスを変更することができます。

カラーモードを変更する

extendConfigを使用して、生成されたコンフィグをUIProviderのconfigに渡します。

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


const customConfig = extendConfig({ initialColorMode: "system" })


const App = () => {
  return (
    <UIProvider config={customConfig}>
      <YourApplication />
    </UIProvider>
  )
}
Copied!

CSSカスタムプロパティをプレフィックスを変更する

extendConfigを使用して、生成されたコンフィグをUIProviderのconfigに渡します。

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


const customConfig = extendConfig({ var: { prefix: "yamada" } })


const App = () => {
  return (
    <UIProvider config={customConfig}>
      <YourApplication />
    </UIProvider>
  )
}
Copied!

ブレイクポイントの方向を変更する

Yamada UIは、デフォルトで@media(max-width)のメディアクエリを用いたレスポンシブデザインを採用しています。もし、@media(min-width)のメディアクエリを採用したい場合は、breakpoint.directionを"up"に変更します。

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


const customConfig = extendConfig({ breakpoint: { direction: "up" } })


const App = () => {
  return (
    <UIProvider config={customConfig}>
      <YourApplication />
    </UIProvider>
  )
}
Copied!

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

前デフォルトのコンフィグ次セマンティックトークン