チャクラクラッシュコース

ビデオチュートリアル

チャクラのUIは何ですか？

インストール

yarn create next-app <my-app>

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

次のセットアップチャクラUI

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

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

export default MyApp

コンポーネントのインポート方法

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

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

export default Index

カスタムスタイル

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

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

カラーモードを変更

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

ライトモード

ダークモード