scoped CSS

천진우·2022년 3월 7일

1. scoped CSS란?

: 현재 컴포넌트의 엘리먼트들에만 CSS를 적용

<style>
/* 전역 CSS */
</style>

<style scoped>
/* 현재 컴포넌트에만 적용 */
</style>

-> 특정 컴포넌트의 스타일이 다른 컴포넌트에 영향을 주는것을 방지

=> scoped CSS를 사용하면 돔 속성에 랜덤한 속성 이름 생성
(ex: data-v-f3f3fdk)
=> 클래스 이름이 해당 속성 이름과 함께 명시된다
(ex: .example -> .example[data-v-f3f3fdk])

2. 문제점

: 하위 컴포넌트 스타일 적용 안됨
-> 하위 컴포넌트의 scoped 속성 이름은 부모와 다르거나 속성 이름이 없다(scoped 설정을 하지 않는 경우)

ex)

calender.vue 컴포넌트에서 vuetify v-date-picker 사용
-> 위와 같이 공휴일/일요일에 색을 빨간색으로 변경 희망
-> date-picker에서 각각의 날짜를 나타내는 부분에 document 객체를 사용해 .holiday-color 클래스를 삽입
-> css를 통해 색을 빨간색으로 변경

<style scoped>

.v-date-picker .v-date-picker-table .v-btn .holiday-color{
  color: red;
}

</style>

-> 스타일이 적용되지 않는다
(scoped 속성 이름이 붙기 때문)

3. 해결

: Deep Selectors 사용 ( >>> )

<style scoped>

.v-date-picker >>> .v-date-picker-table .v-btn:not(.v-btn--disabled) .holiday-color{
  color: red;
}

/* 아래와 같이 변환된다 */

.v-date-picker[data-v-f3f3eg9] .v-date-picker-table .v-btn:not(.v-btn--disabled) .holiday-color{
  color: red;
}


</style>