yarn add react-calendar
로 설치한 후 하라는대로 node_modules에 있는 .css파일을 불러왔지만,
달력 커스텀이 되지 않았다.
값을 아무리 바꾸어도 적용이 되지않아 여러번 삭제 후 재설치 했는데도 결과는 같았다.
해결
1. Calendar.css 파일의 이름을 Calendar.ts로 바꾸고
import styled from '@emotion/styled';
import Calendar from 'react-calendar';
export const Ccc = styled(Calendar)`
`
이렇게하니 Calendar의 스타일이 모두 벗겨졌지만,
다른 스타일을 주어도 변동이 없었다......
그래서 다시.
이번엔
이렇게 만들고
calendar.style.ts 파일에
import styled from "@emotion/styled";
import Calendar from 'react-calendar';
export const Minicalendar = styled(Calendar)`
.react-calendar {
width: 310px;
max-width: 100%;
background: white;
border: 1px solid #a0a096;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.125em;
}
이렇게 해준 후
calendar.container에 기존에 스타일을 주는 방법처럼(보통은 presenter에서 작업하지만 코드가 짧아서)
import React, { useState } from 'react';
import * as S from './calendar.styles'
export default function MiniCalendar(){
const [value, onChange] = useState(new Date());
return(
<div>
<S.Minicalendar onChange={onChange} value={value} />
</div>
)
}
이렇게 해주었더니
짠!(아직은 뼈대만....색깔정도만 수정해봄)
파란색이었는데, 초록색으로 바뀌었다!!!
드디어 스타일이 된다.
그럼이제 커스텀 시작!!!