Chakra-UI 단기집중과정

이 블로그에서는 Chakra-UI를 시작하는 방법을 알려드립니다.

비디오 자습서

차크라UI란?

Chakra-UI는 웹 사이트에서 사용할 수 있는 사전 스타일이 지정된 수많은 구성 요소와 유틸리티가 포함된 React UI 라이브러리입니다.

설치

nextjscolor='red' fontSize='5rem'을 사용하겠습니다.

yarn create next-app <my-app>

패키지 설치:

cd <my-app>
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

다음으로 Chakra-UI 설정

Component 구성 요소를 ChakraProvider 구성 요소로 래핑합니다.

import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }) {
    return (
        <ChakraProvider>
            <Component {...pageProps} />
        </ChakraProvider>
    )
}

export default MyApp

이제 chakra-UI 구성 요소를 사용할 수 있습니다.

구성 요소를 가져오는 방법

구성 요소 및 유틸리티는 항상 @chakra-ui/react 패키지에서 명명된 가져오기로 가져옵니다.

import { Button, Text, Heading, Box, Link, useTheme } from '@chakra-ui/react'

const Index = () => {
    return <Heading>Heading 1</Heading>
}

export default Index

맞춤 스타일

스타일을 사용자 지정하는 방법에는 두 가지가 있습니다.

스타일 소품: 스타일 소품을 사용하면 거의 모든 CSS 속성을 소품으로 사용할 수 있습니다.

const Index = () => {
    return (
        <Heading color='red' fontSize='5rem'>
            Heading 1
        </Heading>
    )
}

SX 소품: sx 소품을 사용하면 모든 사용자 정의 스타일을 객체로 사용할 수 있습니다.

const Index = () => {
    return (
        <Heading
            sx={{
                color: 'red',
                fontSize: '5rem',
            }}
        >
            Heading 1
        </Heading>
    )
}

색상 모드 변경

useColorMode 후크를 사용하여 색상 모드를 변경할 수 있습니다.

import React from 'react'

import { IconButton, useColorMode } from '@chakra-ui/react'

import { MoonIcon, SunIcon } from '@chakra-ui/icons'

const ToggleMode = () => {
    const { colorMode, toggleColorMode } = useColorMode()
    return (
        <IconButton
            icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
            onClick={toggleColorMode}
        />
    )
}

export default ToggleMode

라이트 모드

다크 모드

자세한 내용은 비디오 자습서를 시청하십시오.