기본적으로 모든 chakra ui의 컴포넌트는 default theme을 따르지만
아래와 같은 요구사항이 있다면 커스텀할 수 있다.
- colors, font size, line height 등의 theme token이 필요한 경우
- 컴포넌트의 스타일, 사이즈, variant의 변경이 필요한 경우
- 전역 스타일의 변경이 필요한 경우
theme token
default theme에서 colors를 정의한 것과 같다.
1import { extendTheme } from '@chakra-ui/react'
2
3const colors = {
4 brand: {
5 100: "#q328',
6 }
7}
8
9const theme = extendTheme({ colors })
10
11---
12<Button colorScheme={brand}></Button>
Compoenent styles
메인 컨셉
- 컴포넌트는 default 또는 base styles을 가진다.
- size를 스타일링 한다.
- variant를 스타일링 한다.
추가로 defualtProps는 colorScheme, size, variant를 설정할 수 있다.
(구조)
1import { ComponentStyleConfig } from "@chakra-ui/react"
2
3const ComponentSytle: ComponenetStyleConfig = {
4 baseStyle: {},
5 sizes: {},
6 variants: {},
7
8 defaultProps:{
9 colorScheme: "",
10 size: "",
11 variant: "",
12 }
13}
Single Component
theme을 스타일링하거나 덮어쓰는 경우에 하나의 part로 구성된 단일 컴포넌트인지 확인해야한다. 아니라면 스타일링하면서 영향을 받는 각 part의 이름을 지정해야한다.
1import { extendTheme } from "@chakra-ui/react"
2import type { StyleFunctionProps } from "@chakra-ui/styled-system"
3
4const Button: {
5 baseStyle: {
6 fontWeight: 'bold'
7 },
8 sizes: {
9 xl: {
10 height: "56px",
11 fontSize: "lg",
12 paddingX: "32px"
13 }
14 },
15 variants: {
16 solid: {
17 bg: "#fff"
18 boxShadow: "0 0 2px 2px #000"
19 },
20 ghost: ({colorMode}: StyleFunctionProps) => ({
21 bg: colorMode === 'light' ? "#fff" : "#000"
22 }),
23 // 반응형도 설정 가능
24 sm: {
25 bg: "blue.400",
26 fontSize: "sm",
27 }
28 }
29 defualtProps: {
30 size: 'xl',
31 variant: 'solid',
32 colorScheme: 'gray'
33 }
34}
35
36const theme = extendTheme({ components: { Button } })
37or
38const theme = extendTheme({ components: { Button: defineStyleConfig({ ...Button }) }})
39// Button은 이미 chakra에 있어서 위처럼도 쓸 수 있지만
40// Card와 같은 경우에는 새로 정의된 컴포넌트이기 때문에 defineStyleConfig를 사용해야한다.
Global Styles
전역 html element를 스타일링할 수 있다.
1import { extendTheme } from "@chakra-ui/react"
2
3const global = {
4 body: {
5 bg: 'white',
6 color: 'f000'
7 },
8 a: {
9 color: 'f000'
10 }
11}
12
13const theme = extendTheme({ styles: { global } })
extensions
withDefaultColorScheme
선택한 모든 컴포넌트에 default colorScheme을 먹일 수 있다.
1import { extendTheme, withDefaultColorScheme } from '@chakra-ui/react'
2
3const customTheme = extendTheme(
4 withDefaultColorScheme({
5 colorScheme: 'red',
6 components: ['Button', 'Badge'],
7 }),
8 withDefaultColorScheme({
9 colorScheme: 'blue',
10 components: ['Alert', 'Table'],
11 }),
12)
withDefaultSize
선택한 모든 컴포넌트에 default size를 먹일 수 있다.
1import { extendTheme, withDefaultSize } from '@chakra-ui/react'
2
3const customTheme = extendTheme(
4 withDefaultSize({
5 size: 'lg',
6 components: ['Button', 'Badge'],
7 }),
8)
withDefaultVariant
1import { extendTheme, withDefaultVariant } from '@chakra-ui/react'
2
3const customTheme = extendTheme(
4 withDefaultVariant({
5 variant: 'outline',
6 components: ['Input', 'NumberInput', 'PinInput'],
7 }),
8)
withDefaultProps
1import { extendTheme, withDefaultProps } from '@chakra-ui/react'
2
3const customTheme = extendTheme(
4 withDefaultProps({
5 defaultProps: {
6 variant: 'outline',
7 size: 'lg',
8 },
9 components: ['Input', 'NumberInput', 'PinInput'],
10 }),
11)