6월 7일 Chakra UI 삽질


문제: chakra UI에서 제공해주는 theme을 chakraProvider에 적용시키지 못함.

해결하기 위한 노력

  • chakraProvider 밑에 ThemeProvider를 하나 더 만들었다. -> 이렇게 쓴다면 chakraProvider를 쓰는 이유가 뭐지?
  • 제공해주는 theme을 각각의 컴포넌트에서 import해서 사용 -> theme을 사용하는 이유가 사라진다.

결국 이 글을 보고 해결한다.

how-to-use-chakra-ui-with-nex-js-and-react

// chakra-ui에서 제공해주는 ThemeProvider가 따로 있었다...
import { ThemeProvider, theme } from '@chakra-ui/core';

chakraProvider는 chakra UI에서 제공해 주는 컴포넌트들을 사용할 수 있게 도와주는 역할만 하는 것 같다. (현재까지 생각하기로는 그렇게 느껴진다. 더 찾아봐야 함)

처음으로 UI를 손쉽게 만들 수 있는 라이브러리를 적용해보았다.

바로바로 적용할 수 있을 줄 알았지만, 꽤나 삽질이 오래 걸린다. 따로 학습비용도 필요한 듯.

chakra UI를 보면서 내가 직접 만드는 게 더 빠를 수도 있겠다는 생각이 문득 들었다.

사소한 스타일에 신경 쓰고 싶지 않아서 chakra UI를 사용하는 건 데 주객전도의 느낌이다.

그래도 Spinner, Skeleton과 같은 컴포넌트는 바로바로 쓸 수 있어서 정말 좋다.

내일 다시 적용해봐야지.




© 2021.01. by somedaycode

Powered by theorydb