다음 Next.js에서 Chakra-ui를 사용하여 반응형 및 사용자 지정 구성 요소를 만들어 봅시다.

먼저 NextJS 프로젝트가 이미 설정되어 있다고 가정하겠습니다. 그렇지 않은 경우 선호하는 구성Here을 따를 수 있습니다. 그런 다음 Chakra for Next을 설정합니다. 우리가 작성할 첫 번째 코드는 일부 전역 값을 사용자 지정하는 것입니다.

색상 및 중단점 덮어쓰기

아래에서는 기본 기본 색상과 중단점을 덮어씁니다.

//styles/ChakraTheme.js

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    primary: '#201D29',
  },
  breakpoints: {
    sm: '414px',
    md: '584px',
    lg: '1280px',
  },
});

export default theme;

덮어쓰기 사용

사용자 지정 값을 사용하려면 먼저 설정에서 ChakraProvider로 테마를 전달합니다.

//pages/_app.js

import { ChakraProvider } from '@chakra-ui/react'
import theme from '../styles/ChakraTheme.js';

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

export default MyApp

맞춤형 색상 사용

그런 다음 구성 요소에서 사용자 지정 값을 사용할 수 있습니다.

//pages/Home.js
import { Box } from '@chakra-ui/react'; /* <== A Box is a Chakra-ui component,  equivalent to a div, but one you can style  with style props or those from out custom theme**/

const Home = () => {
  return (
    <Box bg='primary'>Home</Box> 
  )
}
export default Home

bg는 style prop이며 배경색에 대한 Chakra-ui의 속기이며 기본으로 덮어쓴 색상을 맞춤 테마로 Box에 제공합니다.

맞춤형 중단점 사용

사용자 지정 중단점을 사용하려면 개체에서 스타일 소품으로 전달합니다. 예:

import { Box } from '@chakra-ui/react'; 

const Home = () => {
  return (
    <Box bg='primary' fontSize={{ base: '18px', sm: '20px' md: '24px', lg: '32px' }}>Home</Box> 
  )
}

export default Home

base: '18px' 18px의 글꼴 크기는 0px-414px 뷰포트 너비에서 적용됩니다.

sm: '20px' 20px의 글꼴 크기는 414px-584px 뷰포트 너비에서 적용됩니다.

md: '24px' 24px의 글꼴 크기는 584px-1280px 뷰포트 너비에서 적용됩니다.

lg: '32px' 32px의 글꼴 크기는 1280px부터 뷰포트 너비까지 적용됩니다.

구성 요소 덮어쓰기

이제 구성 요소를 덮어쓸 수 있습니다.

/styles/components/Button.js

const Button = {
  // Styles for the base style
  baseStyle: {
    borderRadius: '10px', 
    fontFamily: 'Baloo 2',
    // <-- border radius & font family is same for all variants and sizes
  },
sizes: {
  // Styles to be to be applied when passed to the Button
  // E.g <Button size='md'>Click</Button>
    sm: {
      fontSize: '12px',
    },
    md: {
      fontsize: '18px',
    },
    lg: {
      fontSize: '22px',
    },
  },
    // Styles for the visual style variations
  variants: {
    rainbow: {
      bgGradient:
        'linear(to-b, #ff96bc, #ffc477 , #fbe84a , #c1f3a1 , #96fce4 )',
      color: 'black',
      border: '1px solid break',
    },
  },
  //   // The default `size` or `variant` values
  //   defaultProps: {},
};

export default Button;

테마에 버튼 추가

스타일/ChakraTheme.js

import { extendTheme } from '@chakra-ui/react';
import { Button } from 'import Button from './components/Button';'

const theme = extendTheme({
  components : {
  Button      
  },
  colors: {
    primary: '#201D29',
  },
  breakpoints: {
    sm: '414px',
    md: '584px',
    lg: '1280px',
  },
});

export default theme;

새 버튼 변형 사용

마지막으로 구성 요소에서 새 변형을 사용합니다.

import { Box } from '@chakra-ui/react'; 

const Home = () => {
  return (
    <Box bg='primary' fontSize={{ base: '18px', sm: '20px' md: '24px', lg: '32px' }}
 > <Button variant='rainbow'>
   Log in
    </Button
</Box> 
  )
}

export default Home

후속 조치로 반응형 레이아웃 알아보기