Text and Layer Styles

In most projects, you may notice that certain text properties (such as font size) and layer properties (such as background color) are being repeated. As the scale of the project grows, it may become difficult to ensure design consistency.

By using textStyle and layerStyle, you can maintain design consistency.

Customize the Theme

To use textStyle and layerStyle, you need to define tokens and styles in the theme.

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!

If you want to learn more about themes, please check Customize Theme and Component Styles.

Layer Styles

To refer to the styles defined in the theme's layerStyles, set the token in layerStyle.

Editable example

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

Copied!

Text Style

To refer to the style defined in the theme's textStyles, set the token to textStyle.

Editable example

<Heading textStyle="gradient" isTruncated>
  About Kurillin... About Kurillin!!!!!
</Heading>

Copied!

Other Styles

You can freely define tokens and styles in the theme's 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!

To reference the style defined in the theme's styles, set the token in apply.

Editable example

<Heading apply="otherStyle.title" isTruncated>
  My power level is 530,000. But of course, I have no intention of fighting you
  at full power, so don't worry...
</Heading>

Copied!

Edit this page on GitHub

PreviousReset Styles NextCLI