[React] react-datepicker 라이브러리 css/style 적용 안되는 에러

Intro

react-datepicker 라이브러리를 사용하던 도중 CSS 가 적용 안되는 에러가 발생했습니다. 참고로 저는 타입스크립트도 적용해야 했기 때문에 라이브러리 설치는 아래와 같이 진행하였습니다.

yarn add react-datepicker
yarn add @types/react-datepicker

 

react-datepicker 공식 홈페이지에 있는 Default 예제를 코드에 넣어 실행하자, css가 전혀 적용되지 않는 상태로 화면에 뜨더군요.

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

 

Why?

바로 구글링을 해봤습니다. 저와 비슷한 에러를 겪으신 분들이 많았습니다. 

 

https://github.com/Hacker0x01/react-datepicker/issues/879

 

딱 이 글을 쓰신 분과 제 상황이 유사하다고 보면 됩니다. 답변도 굉장히 많이 달렸네요. 이후 저는 react-datepicker 공식 페이지도 살펴보았습니다. 

 

You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).

import React, { useState } from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

직접 css를 명시해야, css 파일을 사용할 수 있었군요..

 

How to solve the problem

date-picker를 사용하는 파일에 다음과 같이 css를 명시하여 import 해주었습니다. 다행히 css가 적용이 되네요. 

import "react-datepicker/dist/react-datepicker.css"

+) css가 적용되긴 하는데..

살짝 찌그러져서 적용이 되더라고요? 🤫 이 문제는 저만 그런건지.. 다시 한번 연구해 봐야 될 것 같습니다.

---

https://reactdatepicker.com/

https://github.com/Hacker0x01/react-datepicker

https://github.com/Hacker0x01/react-datepicker/issues/879