テキストとレイヤースタイル

ほとんどのプロジェクトでは、特定のテキストのプロパティ(フォントサイズなど)やレイヤーのプロパティ(背景色など)を繰り返していることに気づくかもしれません。プロジェクトの規模が大きくなるにつれて、デザインの一貫性を担保できなくなる可能性があります。

textStyleとlayerStyleを使用することで、デザインの一貫性を保つことができます。

テーマをカスタマイズする

textStyleとlayerStyleを使用するには、テーマにトークンとスタイルを定義する必要があります。

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

const layerStyles: LayerStyles = {
  masterRoshi: {
    position: "relative",
    m: "md",
    boxSize: "4xs",
    border: "6px solid #000",
    rounded: "full",
    bg: "#FFF",
    fontFamily: "serif",
    color: "#000",
    fontSize: "8xl",
    fontWeight: "bold",
    _after: {
      content: '""',
      position: "absolute",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      zIndex: -1,
      rounded: "md",
      bg: "#FF7F0B",
      boxSize: "3xs",
    },
  },
}

const textStyles: TextStyles = {
  gradient: {
    fontSize: "5xl",
    bgGradient: "linear(to-r, orange.400, red.500)",
    bgClip: "text",
  },
}

const customTheme = extendTheme({ styles: { layerStyles, textStyles } })()

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

Copied!

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

レイヤースタイル

テーマのlayerStylesで定義したスタイルを参照するには、layerStyleにトークンを設定します。

編集可能な例

<Center layerStyle="masterRoshi">亀</Center>

Copied!

テキストスタイル

テーマのtextStylesで定義したスタイルを参照するには、textStyleにトークンを設定します。

編集可能な例

<Heading textStyle="gradient" isTruncated>
  クリリンのことか……クリリンのことかーーーっ！！！！！
</Heading>

Copied!

その他のスタイル

テーマのstylesには、自由にトークンとスタイルを定義できます。

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

const otherStyle: Record<string, CSSUIObject> = {
  title: {
    fontSize: "5xl",
    bgGradient: "linear(to-r, #59a9e1, #f37bdf)",
    bgClip: "text",
  },
}

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

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

Copied!

テーマのstylesで定義したスタイルを参照するには、applyにトークンを設定します。

編集可能な例

<Heading apply="otherStyle.title" isTruncated>
  私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
</Heading>

Copied!

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

前リセットスタイル次CLI