티스토리 뷰

카테고리 없음

v-deep 속성

실전압축코딩 2023. 3. 6. 10:15

 

vuetify로 snackbar 컴포넌트 사용중 스타일을 수정해야 하는 경우가 생겼다... 

 

https://handhand.tistory.com/23

 

[Vue.js] v-deep 속성에 대해서

vue 에서 v-deep 이란? 📌 컴포넌트의 scoped 선언 사내에서 vuetify 로 구성된 일부 화면을 다룰 일이 생겼는데 vuetify 에서 제공되는 컴포넌트의 스타일 지정이 뜻대로 되지 않을 때가 발생하곤 합니

handhand.tistory.com

v-loader

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

 

Scoped CSS | Vue Loader

Scoped CSS When a tag has the scoped attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by u

vue-loader.vuejs.org

 

v-deep 이란? vue에서 제공하는 딥 셀렉터, scoped를 해치지 않고 자식 컴포넌트의 스타일 지정 가능.

 

딥 셀렉터 사용 방법 3가지

<style scoped>
.a >>> .b { /* ... */ }
</style>
copy javascript<style scoped>
.a /deep/ .b { /* ... */ }
</style>
copy javascript// 이 방법을 추천함
<style scoped>
.a::v-deep .b { /* ... */ }
</style>

 

예시) 

<style scoped >
  .snackbar::v-deep .v-snackbar__content {
    margin-right: 0;
  }
</style>