심층 선택기를 사용하여 Vue.js에서 하위 구성 요소의 스타일을 지정하는 방법은 무엇입니까?

Vue.js의 하위 구성 요소에 스타일 적용: /deep/, >>> 및 ::v-deep

Vue.js에서는 심층 선택기를 사용하여 하위 구성 요소 내의 요소 스타일을 지정할 수 있습니다. 그러나 스타일 규칙에 /deep/, >>> 또는 ::v-deep 연산자를 사용하려고 하면 예상대로 작동하지 않을 수 있습니다. 다음은 이러한 연산자를 올바르게 사용하는 방법에 대한 가이드입니다.

Vue 2.0 - 2.6

• Sass:

  선택기 앞에 ::v-deep을 사용하여 하위 요소에 스타일을 적용합니다.

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

• Sass 없이:

  >>>를 사용하세요. 동일한 효과를 얻으려면 선택기 앞에

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

Vue 3(및 Vue 2.7)

• 통일 구문:

  :deep()을 선택기로 사용하고 대상 요소 선택기를 괄호로 묶습니다. 이 구문은 Sass 유무에 관계없이 작동합니다.

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

• 더 이상 사용되지 않는 구문:

  ::v-deep 접두사는 이제 Vue에서 더 이상 사용되지 않습니다. 3. >>> 연산자도 더 이상 사용되지 않습니다.

Vue 3 New Selector

• 슬롯 콘텐츠:

  :slotted()를 사용하여 전달된 콘텐츠의 스타일을 지정하세요. Slots.

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

• 전역 스타일:

  :global()을 사용하여 범위가 지정된 구성 요소에서 전역 스타일을 등록합니다.

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

범위 지정 요구사항

Vue의 모든 버전에서