텍스트 스타일(Text Styles)

텍스트 스타일(Text Styles)

텍스트와 관련된 타이포그래피 속성을 묶어 정의하는 텍스트 스타일 사용법에 대해 알아봐요. textStyle 하나로 여러 타이포그래피 속성을 한 번에 적용할 수 있어요.

출처: 문서

본문

개요 (Overview)

텍스트 스타일은 텍스트 관련 CSS 속성을 정의할 수 있게 해줘요. 주로 쓰는 속성은 다음과 같아요.

• 글꼴(Font): 글꼴 종류, 굵기, 크기
• 행간(Line height)
• 자간(Letter spacing)
• 텍스트 장식(Text decoration)
• 텍스트 변형(Text transform)

텍스트 스타일 정의하기 (Defining text styles)

텍스트 스타일은 defineTextStyles 함수로 정의해요.

import { defineTextStyles } from "@chakra-ui/react"

export const textStyles = defineTextStyles({
  body: {
    description: "The body text style - used in paragraphs",
    value: {
      fontFamily: "Inter",
      fontWeight: "500",
      fontSize: "16px",
      lineHeight: "24",
      letterSpacing: "0",
      textDecoration: "None",
      textTransform: "None",
    },
  },
})

기본 제공 텍스트 스타일 (Built-in text styles)

Chakra UI는 기본 제공 텍스트 스타일을 함께 제공해요.

import { createSystem, defineConfig } from "@chakra-ui/react"
import { textStyles } from "./text-styles"

const config = defineConfig({
  theme: {
    textStyles,
  },
})

export default createSystem(defaultConfig, config)

npx @chakra-ui/cli typegen

<Box textStyle="body">This is the body text style</Box>