vue 프로젝트를 진행하면서 vuetify, element UI 같은 library를 사용 할 때가 있다.
이때, 기존에 만들어진 컴포넌트의 스타일을 재조정(override)하는 것에 어려움을 많이 겪었는데,
그것을 극복할 수 있는 방법에 대해 정리해보고자 한다.
스타일 적용이 안되는 상황
분명 .el-input__inner라는 클래스임을 확인하고, 아래 처럼 스타일을 적용 했을 때 스타일 적용이 제대로 되지 않는 것을 확인 할 수 있었고, 이 포스트는 이를 해결 하는 방법에 대한 내용이다.
//someComponent.vue
//...
<style lang="scss" scoped>
.el-input__inner{
color: red;
}
</style>
문제의 원인
이러한 현상의 원인은 scoped라는 키워드 때문이다.
scoped라는 키워드를 넣게 되면, 해당 컴포넌트에만 스타일이 적용이 된다.
즉, scoped라는 키워드는 현재 컴포넌트에서 적용된 스타일이 다른 컴포넌트에서 적용이 되지 않게 하기 위한 키워드인데,
여기에서는 someComponent에서 다른 라이브러리에서 기존에 만들어 놓은 컴포넌트에 접근하려고 하니 제대로 작동하지 않는 것이었다.
해결 방법
사실 가장 간단한 방법은 scoped 키워드를 없애는 것이다.
하지만, 이 방법은 전역적으로 영향을 주기 때문에 권장되는 방법도 아니고, 내가 소개하고자 하는 방법도 아니다.
deep-selector: v-deep
이럴 때 사용할 수 있는 방법이 바로 vue에서 제공하는 deep-selector(v-deep)를 이용하는 방법이다. (참고 링크)
vue에서 제공하는 deep-selector는 총 3가지 방법이 있다.
//1번 방법
<style scoped>
.a >>> .b { /* ... */ }
</style>
//2번 방법
<style scoped>
.a::v-deep .b { /* ... */ }
</style>
//3번 방법
<style scoped>
.a /deep/ .b { /* ... */ }
</style>
Vue 공식 홈페이지에서는 첫 번째 방법의 경우, Sass, SCSS와 같은 CSS 전처리기를 사용하는 경우 정상적으로 작동하지 않을 수 있다고 얘기 하고 있다.
따라서, 2번째나 3번째 방법으로 이용하길 권장한다.
그리고 아래처럼 위의 방법을 이용하였을 때 정상적으로 CSS가 적동되는 것을 볼 수있었다.
.box_card_wrapper::v-deep .el-descriptions-item__label {
width: 150px;
}
