[Vue.js] UI 라이브러리 클래스에 스타일 적용하기

사내 Vue 프로젝트는 buefy라는 UI라이브러리를 사용하고 있다. 

프로젝트를 진행하면서 buefy에서 제공하는 요소의 스타일을 변경하고 싶은데 일부는 변경되고 일부는 변경되지 않는 문제가 있었다.

 

Scoped

vue의 style 태그에는 scoped 속성을 사용할 수 있다. 

scoped는 특정 컴포넌트의 스타일이 해당 컴포넌트에만 적용되도록 강제하는 역할을 한다.

 

Foo1.vue

<template>
  <div class="wrapper">
    <b-field label="Foo2"></b-field>
  </div>
</template>

<style lang="scss" scoped>
  .wrapper {
      background: blue;
  }
</style>

scoped를 사용하면 돔 속성에 랜덤한 이름이 생성된다.

개발자도구로 Foo1 컴포넌트를 확인하면 돔 속성에 랜덤한 이름 (data-v-544b6424)이 생성된 것을 확인할 수 있다.

 scoped를 사용했을 때 실제 동작되는 코드를 풀어서 작성하면 아래와 같다.

<template>
  <div class="wrapper">
    <b-field label="Foo2"></b-field>
  </div>
</template>

<style lang="scss" scoped>
  .wrapper[data-v-544b6424] {
      background: blue;
  }
</style>

 

scoped 속성을 사용할 때 UI라이브러리의 요소가 일부는 스타일이 변경되고 일부는 변경되지 않는다고 했는데

1번의 field 클래스는 data-v-544b6424 속성이 들어가서 같은 범위(scoped)로 인지해서 scoped속성을 사용해도 변경이 되지만,

2번의 label 클래스는 data-v-544b6424 속성이 없어 다른 범위(scoped)로 인지하고 style 태그 내에서 변경이 이루어지지 않았다. 

<template>
  <div class="wrapper">
    <b-field label="Foo2"></b-field>
  </div>
</template>

<style lang="scss" scoped>
  .field {
    background: blue;
  }
  .label {
    color: white;
  }
</style>

 

::v-deep 속성

scoped 속성을 제거하면 라이브러리 클래스에 스타일을 적용할 수 있게 되지만 해당 클래스의 스타일이 전역적으로 적용된다는 문제가 있다.

 

scoped 속성을 제거하지 않고 buefy 요소 클래스에 스타일을 적용하려면 어떻게 해야할까?

vue에서 제공하는 딥 셀렉터 v-deep 속성을 사용하면 쉽게 해결할 수 있다.

<template>
  <div class="wrapper">
    <b-field label="Foo2"></b-field>
  </div>
</template>

<style lang="scss" scoped>
  .field {
    background: blue;
  }
  ::v-deep .label {
    color: white;
  }
</style>

위에서 적용되지 않던 color: white; 스타일이 적용된 걸 확인할 수 있다!!