[팀] 겸상 - v-deep을 이용해 Datepicker의 스타일 변경

[그림 1] 변경된 데이트피커의 CSS 스타일

 

[그림 1]과 같이 노란색으로 데이트 피커(Datepicker)에 노란색(메인 컬러)을 넣고 싶었다. 그래서 원하는 색상 값으로 해당 컴포넌트의 스타일 부분에도 적용해 보고 인라인으로도 시도해봤지만 데이트 피커의 디폴트 색은 마치 최종 보스 같이 상처하나 입지 않은 모습이었다. 그러다가 문득 스코프 문제가 아닐까 하는 생각이 들었다. 데이트 피커가 적용된 컴포넌트에는 스타일 설정 값이 <style scoped lang="scss"> 안에 작성되어 있는데 여기서 scoped를 제거해 보았다. 그랬더니 원했던 색이 표현되었다.

데이트 피커는 해당 컴포넌트에서 자식 컴포넌트로 취급되다 보니 스코프 내로 제한된 스타일은 적용되지 않았던 것이다. 이제 문제의 원인을 알게 되었으니 해결만 하면 되었다. 검색해 보니 v-deep으로 자식 컴포넌트까지 스타일이 적용되도록 할 수 있었다.

이 문제를 해결함에 있어 도움을 받았던 페이지는 다음과 같다.

https://webisfree.com/2021-10-19/[vuejs]-scoped-css%EB%A5%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EB%B0%8F-%EC%98%88%EC%A0%9C%EB%B3%B4%EA%B8%B0 

[VueJS] scoped css를 이해하기 및 예제보기

 

---

2022-07-20 추가 내용

겸상의 메인 화면에 밥상 조회를 위한 또 다른 데이트 피커를 붙였다. 그런데 이 녀석은 v-deep에 반응하지 않았다. 분명 import 한 자식 컴포넌트인데 이유를 알 수가 없었다. 대신에 아래 코드와 같이 v-global을 적용하니 원하는 색으로 표현되었다('...'은 가독성을 위해 생략한 코드 부분을 의미함).

<style scoped lang="scss">
::v-global(.dp__theme_light) {
	...
}
</style>

 

[그림 2] v-global 적용