react-datePicker 라이브러리 커스텀하기

(좌)기존 (우)목표

상황

달력 라이브러리를 사용하는건 크게 어렵지 않다. 왼쪽은 react-datePicker에서 기본으로 주는 css를 임포트해서 적용시킨 것이다.

오 좋은데? 하지만 나는 디자이너님이 주신 달력 디자인 대로 만들어야 하니니 이대로 쓸 수 없다.

커스터마이징을 해보자.

 

먼저 바꿔야 할 몇가지를 정리해보자.

1. 헤더에 월, 년도 말고 월만 나타나게 하기

2. 월~일 알파벳 앞에서 3글자까지 표시하기(Su -> Sun)

3. 오늘 표시하는 dot 스타일링 변경

---

방법1. 넘겨준거 쓰기 - 실패🤔

 

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

 

코드 맨 상단에 임포트해 온 기본 css를 찾는다.

node_modules 안에 들어가서 저 경로를 따라 들어가면 찾을 수 있다.

뭔가 엄청 대단한 것들 같아 내가 이걸 만져도 될까 싶지만

그냥 라이브러리 만든 개발자들이 넘겨준 css파일이다.

여기서 원하는 클래스를 찾아 css 수정을 하면 된다고 한다.

원하는 클래스는 브라우저 개발자도구의 elements 탭에서 찾을 수 있다.

근데 이상하게 아무것도 바뀌지 않는다.. 같은 클래스 이름의 속성을 바꿔줬음에도.

 

방법2. 내가 만든거 덮어쓰기 - 성공🤗

그냥 css파일 만들어서,

바꾸고 싶은 태그의 클래스명을 개발자도구에서 찾은 뒤,

원하는 속성을 적어주면 된다.

 

그럼 기존 스타일들에 덮어씌워진다.

근데 가끔 또 안 먹히는 애들이 있다.

걔네는 !important 이거 쓰면 된다.

세상에.

이거 되도록 쓰지 말라했는데 의도치 않게 남발을 하게 되었다.

(몇몇 블로그에서 이렇게 하라했음)

끝.