브레이크포인트 커스터마이징
브레이크포인트 커스터마이징 (Customizing Breakpoints)
Chakra UI에서 브레이크포인트를 커스터마이징하는 방법에 대해 알아봐요. 테마에 원하는 브레이크포인트를 추가하고 반응형 프로퍼티에서 참조할 수 있어요.
출처: 문서
본문
:::info
스타일링 엔진을 제대로 커스터마이징하고 타입 안정성을 얻으려면 먼저 개요를 읽어보세요.
:::
예시 (Example)
Chakra UI에서 브레이크포인트를 커스터마이징하는 예시예요.
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
const config = defineConfig({
theme: {
breakpoints: {
tablet: "992px",
desktop: "1200px",
wide: "1400px",
},
},
})
export default createSystem(defaultConfig, config)
사용법 (Usage)
반응형 프로퍼티를 사용할 때 새 브레이크포인트를 참조해요.
<Box fontSize={{ base: "16px", tablet: "18px", desktop: "20px" }}>Hello</Box>