"PrimeVue 라이브러리를 사용할 때 Vue3의 :deep() 선택기가 유효하지 않습니다."

Question

vue3과 PrimeVue 라이브러리를 사용하고 있습니다. :deep() 선택기를 사용하여 PrimeView 구성 요소의 CSS 필드를 재정의하려고 하면 아무 효과가 없습니다. 범위가 지정되지 않은 스타일을 사용할 때만 변경 사항이 적용됩니다. 왜 작동하지 않는지 혼란스러워요.

:deep()를 사용한 샘플 코드:

<템플릿>
    <토스트 위치='오른쪽 하단'/>
</템플릿>

<스타일 범위>
:deep(.p-toast-message-icon) {
    여백 오른쪽: 10px !important;
}
</스타일>

이 방법은 작동하지 않습니다.

그러나 다음과 같이 범위 없이 style을 사용하는 경우:

<style>
.p-toast-메시지-아이콘 {
    여백 오른쪽: 10px !important;
}
</스타일>

효과가 있습니다.

Answer 1

via :deep选择器生成的规则会针对当前组件的子元素生效，但是p-toast는 요소에 연결되므로 생성된 클래스는 아무런 효과가 없습니다.

그러나 스타일 규칙을 아이콘에 전달하도록 전달 옵션 을 설정할 수 있습니다.

으아악

또는

으아악

Sandbox에서 예시를 확인하세요.