Vue.js를 사용하여 애플리케이션을 개발할 때, 부모 컴포넌트에서 자식 컴포넌트의 스타일을 변경해야 하는 경우가 있다. Vue는 기본적으로 스타일 캡슐화를 지원하여 자식 컴포넌트의 스타일이 부모 컴포넌트에 영향을 미치지 않도록 설계되어 있다. 그러나 특정 상황에서는 부모 컴포넌트에서 자식 컴포넌트의 스타일을 변경할 필요가 있다.
Vue 3.1 이후에는 ::v-deep 사용이 권장되지 않으며, 대신 :deep() 선택자를 사용해야 한다. 이 글에서는 :deep() 선택자를 사용하여 자식 컴포넌트의 스타일을 변경하는 방법을 설명한다.
1. :deep() 선택자
:deep() 선택자는 부모 컴포넌트의 스타일이 자식 컴포넌트에 적용되도록 한다. 이는 부모 컴포넌트의 <style> 블록 내에서 사용된다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트의 특정 클래스를 타겟팅할 때 :deep(.class-name) 형식으로 사용한다.
2. 컴포넌트 구조
자식 컴포넌트 : CustomBox.vue
부모 컴포넌트 : ResultBar.vue
select기능이 있는 CustomBox 컴포넌트를 ResultBar에서 사용할 때,
CustomBox의 원래 배경색인 회색을 흰 색으로 바꾸고자 한다.
3. 스타일 적용
부모 컴포넌트의 <style> 블록에서 :deep() 선택자를 사용하여 자식 컴포넌트의 특정 요소를 스타일링한다. 예를 들어, 자식 컴포넌트의 .selected-item 클래스를 스타일링하려면 :deep(.selected-item) 형식을 사용한다. 이렇게 하면 부모 컴포넌트에서 정의한 스타일이 자식 컴포넌트의 해당 요소에 적용된다.
:deep(.selected-item) {
background-color: white;
} |  |
|---|
