Next에 Chakra 설치와 사용법

Next에 차크라 세팅

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

 

 

 

Next에 차크라 세팅

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'

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

export default MyApp

 

 

 

컴포넌트에 차크라 세팅

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'

// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac',
  },
}

const theme = extendTheme({ colors })

// 3. Pass the `theme` prop to the `ChakraProvider`
function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp;

 

 

 

 

 

---

margin & padding

<Box m={2}>Tomato</Box>
<Box maxW="960px" mx="auto" />

// 모든 뷰포트에 마진을 8px, 12px를 준다
<Box m={[2, 3]} />

m - margin

p - padding

t, r, l, b - top, right, left, bottom

s, e - start( inline-start ), ending( inline-end )

X, Y - ( inline-start + inline-end ), ( inline-top + inline-bottom )

ex) mt = margin-top

 

 

 

 

color & background

// => `theme.colors.gray[50]`
<Box color='gray.50' /> 
<Box color='#f00' />

// 축약형 코드와 긴 코드
<Box bg='tomato' />
<Box backgroundColor='tomato' />

color - color

bg - background ( 긴 버전도 사용가능 )

bgColor - background-color

opacity - opacity

 

 

 

 

 

gradient

// adding linear gradient and color transitions
<Box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />

// adding radial gradient and color transitions
<Box w="100%" h="200px" bgGradient="radial(gray.300, yellow.400, pink.200)" />

// adding the text gradient
<Text
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  bgClip="text"
  fontSize="6xl"
  fontWeight="extrabold"
>
  Welcome to Chakra UI
</Text>

bgGradient - background-imgage

bgClip, backgroundClip - background-clip

 

 

 

 

 

typography

타이포그래피는 -만 뺀 명령어다

fontFamily

fontSize

fontWeight

lineHeight

letterSpacing

textAlign

fontStyle

testTransform

textDecoration

 

 

 

 

 

layout & width & height

// 둘 다 사용 가능
<Box width="100%" height={32} />
<Box w="100%" h="32px" />

// use theme sizing
<Box boxSize="sm" />

// 둘 다 사용 가능
<Box w={256} />
<Box w='256px' />

w - width

h - height

minW - min-width

maxH - max-height

display

boxSize - width, height

verticalAlign

overflow

overflowX, overflowY - 내용이 각각 가로축, 세로축으로 넘어갈때 스크롤바를 만들어줌

 

 

 

 

flexbox

// verbose
<Box display="flex" alignItems="center" justifyContent="space-between">
  Box with Flex props
</Box>

// shorthand using the `Flex` component
<Flex align="center" justify="center">
  Flex Container
</Flex>

gap - 행과 열 사이의 간격

row-gap - 행 사이 간격

column-gap - 열 사이 간격

alignItems, * align - align-items : 세로 축을 기준으로 좌우에 대한 정렬을 관장 

alignContent -  두 줄 이상일때!! 세로 축을 기준으로 좌우에 대한 정렬을 관장 

justifyItems : 가로 축을 기준으로 좌우에 대한 정렬을 관장 

justifyContent, * justify : 두 줄 이상일때!!! 가로 축을 기준으로 좌우에 대한 정렬을 관장 

( justify와 align 차이점 참고 사이트 : https://ipex.tistory.com/entry/CSS3-flex-Box-justifycontent-alignitems )

( items와 content 차이점 참고 사이트 :  https://letsgojieun.tistory.com/49 )

 

flexWrap, * wrap

flex

flexGrow : 화면을 꽉 채운다 / 1 or 0

flexShrink : 화면이 줄면 같이 줄어든다 /  1 or 0

flexBasis : 아이템의 기본 크기를 정한다

( flex 참고 사이트 : https://flexboxfroggy.com/#ko )

 

justifySelf : 혼자서 가로축에 맞춰서 정렬한다

alignSelf : 혼자서 세로축에 맞춰서 정렬한다

order : 속성에 따라 순서가 결정된다

( 시각적으로 확인 가능한 사이트 : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_order ) 

 

 

 

 

 

grid layout

// verbose
<Box display="grid" gridGap={2} gridAutoFlow="row dense">
  Grid
</Box>

// shorthand using the `Grid` component
<Grid gap={2} autoFlow="row dense">
  Grid
</Grid>

 

 

 

기본적인것만 작성했다. 나머지는 본 사이트에서 검색해서 알아보는걸로.

( https://chakra-ui.com/docs/styled-system/style-props )