레이어 스타일

레이어 스타일 (Layer Styles)

레이어 스타일을 사용해서 시각적 속성을 정의하는 방법을 알려드려요. 반복되는 스타일을 묶어서 재사용하기 좋아요.

출처: 문서

본문

개요

레이어 스타일을 사용하면 시각적 속성을 정의할 수 있어요. 일반적인 속성은 다음과 같아요.

• 색상 또는 텍스트 색상
• 배경색
• 테두리 너비와 테두리 색상
• 박스 그림자
• 투명도

레이어 스타일 정의

레이어 스타일은 defineLayerStyles 함수를 사용해서 정의해요.

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

const layerStyles = defineLayerStyles({
  container: {
    description: "container styles",
    value: {
      background: "gray.50",
      border: "2px solid",
      borderColor: "gray.500",
    },
  },
})

내장 레이어 스타일

Chakra UI는 내장 레이어 스타일 세트를 제공해요.

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

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

export default createSystem(defaultConfig, config)

npx @chakra-ui/cli typegen

<Box layerStyle="container">This is inside a container style</Box>