[사람별_Day5] RBC 파헤치기 4 - 기존 스타일과 커스터마이징

RBC의 렌더링 방법(CRS)까지 파악하여 캘린더 형태를 출력하였다!

RBC의 기본적인 스타일이며, 커스터마이징을 위한 내용들을 정리한다.

 

 

---

RBC의 기본 스타일

 

RBC npm 문서를 읽던 중 SASS에 대해 알게 되었다.

문서에는 다음과 같이 나와있다.

 

 

 

이 말인즉슨, 

• RBC의 기본 스타일이 적용된 CSS 파일(react-big-calendar.css)이 있고 이를 바로 import 하여 접근할 수 있다.
• 하지만 스타일을 커스터마이징하려면 SASS 파일을 수정해야 한다.
• 이렇게 수정한 SASS 파일은 새로운 CSS 파일을 빌드하며 직접 import 한다.

 

초기 세팅 중 아래와 같이 캘린더 컴포넌트에 인라인 스타일 요소를 적용시켰다.

공식 문서에 나와있듯 달력의 컨테이너 요소에 높이를 주어야 화면에 나타나기 때문이다.

 

이때 CSS 파일을 import를 했기 때문에 기본 스타일에 접근할 수 있었던 것이다!

import "react-big-calendar/lib/css/react-big-calendar.css";

	<Calendar
        localizer={localizer}
        events={events}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }} // ✅ 달력 높이(달력 나타내기 위함)
      />

높이를 주지 않으면 다음과 같이 출력된다.

 

 

RBC에서 기본적으로 제공하는 스타일 요소들

가장 기본 형태의 CSS 요소를 7개의 섹션으로 나누어 살펴보겠다.

1. 캘린더 전체 레이아웃 (.rbc-calendar)

• display: flex;로 구성되어 있음
• 내부적으로 rbc-toolbar, rbc-month-view 등의 요소를 포함

.rbc-calendar {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: sans-serif;
  font-size: 14px;
}

 

 

2. 툴바 스타일 (.rbc-toolbar)

• 월 변경 버튼과 현재 날짜 표시하는 부분
• 버튼 기본 스타일 적용됨

.rbc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rbc-toolbar button {
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  padding: 5px 10px;
  cursor: pointer;
}

// 기본 버튼 스타일
.rbc-toolbar button:hover {
  background-color: #e6e6e6;
}

 

 

3. 요일 헤더 스타일 (.rbc-header)

• 요일 표시하는 부분 (예: "일", "월", "화", …)

.rbc-header {
  text-align: center;
  padding: 10px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
}

 

4. 날짜 셀 스타일 (.rbc-day-bg)

• 각 날짜 칸에 적용되는 스타일

.rbc-day-bg {
  border-right: 1px solid #ddd;
}

// 주말 스타일
.rbc-day-bg.rbc-off-range-bg {
  background-color: #f3f3f3;
}

 

5. 이벤트 스타일 (.rbc-event)

• 캘린더에 표시되는 일정(이벤트) 스타일

.rbc-event {
  background-color: #3174ad; /* 기본 파란색 */
  color: white;
  padding: 4px;
  border-radius: 4px;
}

// 마우스 오버 시 스타일
.rbc-event:hover {
  background-color: #265985;
}

// 연속 이벤트 스타일
.rbc-event-continues-before {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-event-continues-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

 

6. 현재 날짜 강조 (.rbc-today)

• 오늘 날짜 배경색 강조

.rbc-today {
  background-color: rgba(0, 0, 255, 0.1);
}

 

7. 선택된 날짜 스타일 (.rbc-selected-cell)

• 드래그로 날짜 범위 선택 시 강조 표시됨

.rbc-selected-cell {
  background-color: rgba(0, 0, 255, 0.2);
}

 

 

기존 스타일을 덮어쓰지 않고 유지하는 방법

앞서 본 7가지의 기존 스타일을 유지하고, 그 이외의 부분에 새로운 스타일을 적용하고 싶다면?

 

1. 기존 스타일을 확장하는 방식

기존 스타일의 이름을 확장하여 새로운 스타일을 적용한다.

.rbc-calendar {
  background-color: white; // 기존 스타일 유지
}
.rbc-calendar.custom {
  border: 2px solid red;  // 추가적인 스타일만 적용
}

 

2. 기존 스타일 상속

@extend를 사용하여 기존의 스타일을 물려받아 새로운 스타일 이름을 지정한다.

.custom-calendar {
  @extend .rbc-calendar; 
  border: 2px solid red;
}

 

3. CSS 변수 활용

RBC의 기존 SCSS 변수를 변경하려면 $변수를 사용하지만 새로운 스타일을 추가할 때는 --변수로 선언하고 var(--변수)로 사용한다.

// styles.scss (기존 RBC 스타일 수정)
@import 'react-big-calendar/lib/sass/styles';

$event-background-color: red;  // 기존 이벤트 배경색 변경

.rbc-event {
  background-color: $event-background-color !important;
}



// styles.css (새로운 스타일 지정)
:root {
  --custom-event-bg: blue; // 새로운 CSS 변수
}

.my-custom-event {
  background-color: var(--custom-event-bg) !important;
}

 

 

 

RBC의 SASS

상단에 적은 것처럼 RBC의 스타일을 커스터마이징하려면 SASS 파일을 수정해야 한다.

그렇다면 SASS는 무엇이며 어떻게 작동하는 것일까?

 

SASS와 SCSS

 

 

RBC 내부적으로 커스터마이징을 위해서는 SASS 파일을 수정해야 한다.

커스터마이징 한 스타일을 브라우저에 적용하기 위해서는 CSS 파일이 필요하다.

 

브라우저는 직접 SCSS 파일을 이해하지 못한다.

즉, SCSS 파일을 브라우저에서 사용하기 위해서는 SCSS 파일을 CSS 파일로 컴파일하여 브라우저가 이해할 수 있는 CSS 파일로 변환해야 한다.

 

RBC와 브라우저의 간극을 해결해주는 것이 Sass 이다.

따라서 Sass라는 것은 CSS 전처리기 도구이며, RBC의 커스터마이징을 브라우저에 적용할 수 있도록 도와준다.

 

 

• Sass(=SASS)는 CSS 전처리기 도구이다.
• SCSS는 Sass에서 지원하는 문법 스타일 형식이다.
• RBC 내부 스타일 파일은 SCSS(.scss) 형식으로 되어있다.

// Sass(.sass)
$primary-color: blue

body
  background: $primary-color

nav
  ul
    margin: 0
    padding: 0

// SCSS(.scss)
$primary-color: blue;

body {
  background: $primary-color;
}

nav {
  ul {
    margin: 0;
    padding: 0;
  }
}

참고 자료

 

 

 

CSS 적용 우선 순위

RBC가 갖고있는 기본 스타일과 커스터마이징을 위한 파일까지 알아보았다.

🤔기존 스타일에 접근하지 않고 SASS 파일을 수정하였을 때, 기존 스타일과 겹치는 부분이 있다면 최종적으로 어떤 것이 반영될까?

 

1. 인라인 스타일 (style={{}}) → 가장 강함
2. ID 선택자 (#calendar)
3. 클래스 선택자 (.rbc-calendar) / 속성 선택자 ([type="text"])
4. 태그 선택자 (div, span 등)
5. 기본 브라우저 스타일 → 가장 약함

 

 

만약, 기존 CSS와 겹칠 경우 기존 스타일보다 강하게 적용하려면

• 더 강한 선택자 사용 (.my-calendar-class .rbc-event 등)
• !important 추가
• CSS 파일이 빌드 후 더 나중에 로드되도록 조정
  
  • 커스텀 CSS를 기존 CSS 이후에 import하기

import 'react-big-calendar/lib/css/react-big-calendar.css'; 
import './my-custom-calendar.scss';  // 커스텀 스타일이 더 나중에 로드됨!