/deep/, >>>, ::v-deep 및 :deep을 사용하여 Vue.js에서 하위 구성 요소의 스타일을 지정하는 방법은 무엇입니까?

>>, ::v-deep 및 :deep? " />

Vue.js에서 /deep/, >>> 또는 ::v-deep을 사용하는 방법

컴포넌트 구조 작업 시 Vue.js에서는 하위 구성 요소 내의 요소에 스타일 규칙을 적용하는 것이 필요합니다. 여기서 Vue는 이를 달성하기 위한 여러 옵션을 제공합니다: /deep/, >>> ::v-deep.

Vue 2.0 - 2.6

Sass: ::v-deep을 활용하여 하위 구성 요소 경계를 관통합니다.

::v-deep .child-class {
    background-color: #000;
}

일반 CSS: 동일한 효과를 얻으려면 >>>를 사용하세요:

>>> .child-class {
    background-color: #000;
}

Vue 3(및 Vue 2.7)

통합 선택기: Vue 3에서는 Sass와 상관없이 통합 선택기로 :deep을 도입했습니다. 사용법:

:deep(.child-class) {
    background-color: #000;
}

슬롯 콘텐츠: 슬롯을 통해 전달된 스타일 지정 요소:

:slotted(.slot-class) {
    background-color: #000;
}

전역 스타일: 범위가 지정된 구성 요소에서 전역적으로 스타일 적용 :

:global(.my-class) {
    background-color: #000;
}

키 고려 사항:

• 모든 스타일은 범위가 지정된