react-calender .css 파일 안될 때

yarn add react-calendar

로 설치한 후 하라는대로 node_modules에 있는 .css파일을 불러왔지만,
달력 커스텀이 되지 않았다.

값을 아무리 바꾸어도 적용이 되지않아 여러번 삭제 후 재설치 했는데도 결과는 같았다.

해결
1. Calendar.css 파일의 이름을 Calendar.ts로 바꾸고

2. Calendar.ts에 emotion과 Calendar를 import한다.

import  styled  from '@emotion/styled';
import Calendar from 'react-calendar';

3. 모든 내용을 이 안에 넣는다.

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>
    )
}

이렇게 해주었더니

짠!(아직은 뼈대만....색깔정도만 수정해봄)

파란색이었는데, 초록색으로 바뀌었다!!!

드디어 스타일이 된다.
그럼이제 커스텀 시작!!!