FrameWork/Chakra-UI3 DarkMode Chakra는 기본적으로 dark모드를 지원함dark모드를 사용하기 위해서는 아래 순서를 따른다 Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React aSimple, Modular and Accessible UI Components for your React Applications. Built with Styled Systemv2.chakra-ui.com [순서]1. 테마설정2. 테마를 프로젝트에 등록3. 등록한 테마를 적재적소에 적용 [1. 테마설정]테마를 담당하는 파일 생성: theme.ts // theme.ts// 1. imp.. 2024. 8. 10. 모달 + useDisclosure Chakra에서 모달을 만들어 띄우기 위해 useDisclosure 훅을 사용한다.useDisclosure는 isOpen, onOpen, onClose를 반환한다. [Modal]ChakraUI에서 Modal컴포넌트를 이용해 Modal만듬props(isOpen, onClose)를 명시해야 함children 컴포넌트들과 함께 사용됨Modal > ModalComponent > ModalHeader, ModalBody, ModalFooterModalOverlay: 모달 띄워지면 주위 어둡게ModalCloseButton: 모달 닫기 버튼 > onClose함수 실행되는 구조 // 모달 실행시 어둡게 .. 2024. 8. 10. 설치 및 사용 [설치] npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React aSimple, Modular and Accessible UI Components for your React Applications. Built with Styled Systemv2.chakra-ui.com [사용] index.tsx파일에 ChakraProvider 임포트 (아래 링크는 컴포넌트별 설명)ChakraProvider로 을 감싸줘야 함.. 2024. 8. 9. 이전 1 다음