[Vue.js] Vue 컴포넌트 내부 요소에 css 적용 방법 (딥 셀렉터)

[Vue.js] 컴포넌트 내부 요소 css 적용 방법

 

문제 상황

Vuetify.js 컴포넌트를 사용하고 있는 중 제공되는 컴포넌트 내부 html 요소의 css를 커스텀하고자 하였다.

일반 css 작업처럼 뷰페이지 하단 <style> 영역에 css에 시도했는데 적용되지 않았다.

 

예를 들어 아래 같은 경우!

컴포넌트 구조의 내부 div 같은 html 요소에 스타일을 먹혀주고 싶었다.

.v-image__image { // style~ }
이런 식으로 요소의 css에 직접 style을 적용해보았는데 통하지 않았다.

 

캐러셀 슬라이더 Vuetify 컴포넌트

Vuetify 컴포넌트가 내부적으로 갖고있는 요소들

 

 

해결 방안

딥 셀렉터를 css 선택자 앞에 붙여서 해결하였다.

::v-deep {선택 요소 나열}

/* slide banner custom */
::v-deep .v-carousel__controls > div > button{
  margin: 0;
  width: 17px;
  height: 17px;
}
::v-deep .v-carousel__controls > div > button > span > i {
  font-size: 10px !important;
}

 

 

딥 셀렉터는 처음 알았는데 말그대로 위 경우처럼 딥하게 선택할 때 필요한 것으로 보인다.

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements