구성 요소가 있습니다 v-popup.vue
<template>
<div class="overlay">
<div class="popup">
<slot></slot>
</div>
</div>
</template>
예를 들어 다음과 같이 부모로부터 스타일을 지정하고 싶습니다.
<template>
<v-popup class="custom-popup">
Popup content
</v-popup>
</template>
<style>
.custom-popup {
padding: 20px;
}
</style>
클래스가 자동으로 추가 되지 않도록 구성 v-popup.vue
요소를 구성하려면 어떻게 해야합니까?custom-popup
div.popup
div.overlay
사용 범위 (부모와 자식 모두) 스타일 것은 좋은 아이디어이며,이 솔루션을 쉽게 할 것이다.
새 custom-popup
클래스 를 만드는 대신 부모에서 깊은 선택기 를 사용합니다 . 이를 통해 부모는 동일한 선택기를 사용하는 자식 구성 요소에 대한 추가 스타일을 정의 할 수 있습니다.
딥 선택기는 다음과 같습니다. >>>
SCSS / SASS 전처리기를 사용하지 않는 한. 그런 다음 ::v-deep
대신 사용 합니다.
<template>
<v-popup>
Popup content
</v-popup>
</template>
<style scoped>
>>> .popup {
padding: 20px;
}
/* If using SCSS/SASS, do this instead */
/*
::v-deep .popup {
padding: 20px;
}
*/
</style>
아이는 자신의 클래스와 부모 클래스를 모두 사용 합니다.popup
.
범위가 지정된 스타일을 사용하지 않은 경우 여러 부모에서 자식을 가져오고 매번 다른 스타일을 사용하려는 경우 금방 문제가됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다