Vue.js : 자식 요소에 CSS 클래스 사용

철공업자

구성 요소가 있습니다 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-popupdiv.popupdiv.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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

next.js에서 사용자 지정 CSS 클래스와 부트 스트랩 클래스를 요소에 어떻게 적용합니까?

분류에서Dev

부모 클래스의 자식 요소에 CSS 스타일 적용

분류에서Dev

일반 CSS에서 Slick.js 사용자 정의 의사 클래스 사용

분류에서Dev

유사 클래스 첫 번째 자식에 CSS3 적용

분류에서Dev

WFFM 양식 섹션의 범례 요소에 사용자 정의 CSS 클래스 추가

분류에서Dev

Vue.js 구성 요소에 사용자 지정 스크립트로드

분류에서Dev

vue.js 조건부 CSS 클래스 내부의 배열 요소에 액세스하는 방법

분류에서Dev

Vue-클래스 스타일 바인딩을 사용하여 앱에 표시되지 않는 구성 요소 CSS 클래스

분류에서Dev

Vue.js에서 활성 클래스 사용

분류에서Dev

parsley.js로 사용자 정의 CSS 클래스 추가

분류에서Dev

Ember.js를 사용하여 일시적으로 DOM 요소에 CSS 클래스 추가

분류에서Dev

클래스를 사용하여 특정 자식 요소에 액세스

분류에서Dev

자식 요소 변경 CSS에 활성 클래스가 포함됨

분류에서Dev

Moodle에서 양식 요소에 CSS 클래스 추가

분류에서Dev

클릭시 자식 요소 가져 오기-Vue JS

분류에서Dev

Vue 클래스 구성 요소, Vuex 클래스를 사용하는 ESLint 오류

분류에서Dev

JQuery 자동 완성에서 사용자 정의 CSS 클래스 사용

분류에서Dev

자바 스크립트에 CSS 클래스가 적용되지 않은 모든 HTML 요소 (라벨) 선택

분류에서Dev

클래스가 클래스 CSS 속성을 사용하지 않는 <a> 요소

분류에서Dev

자바 스크립트를 사용하여 요소 CSS 클래스 런타임을 변경하는 방법

분류에서Dev

Polymer를 사용하여 요소에 조건부로 CSS 클래스 추가

분류에서Dev

CSS 전처리기를 사용하여 요소에있는 클래스 참조

분류에서Dev

두 클래스 사이에 요소가있는 CSS 선택기

분류에서Dev

Angular JS에서 ngClass를 사용하여 CSS 클래스 연결 및 제거

분류에서Dev

Javascipt를 사용하여 요소의 상속 된 (계단식) 상위 CSS 클래스 가져 오기

분류에서Dev

@html에서 svelte css 클래스 사용

분류에서Dev

Laravel에서 CSS 클래스 사용

분류에서Dev

부모 구성 요소 내에서 Vue.js 자식 구성 요소의 데이터를 어떻게 사용합니까?

분류에서Dev

동일한 요소의 다른 클래스를 사용하여 클래스에 CSS 추가

Related 관련 기사

  1. 1

    next.js에서 사용자 지정 CSS 클래스와 부트 스트랩 클래스를 요소에 어떻게 적용합니까?

  2. 2

    부모 클래스의 자식 요소에 CSS 스타일 적용

  3. 3

    일반 CSS에서 Slick.js 사용자 정의 의사 클래스 사용

  4. 4

    유사 클래스 첫 번째 자식에 CSS3 적용

  5. 5

    WFFM 양식 섹션의 범례 요소에 사용자 정의 CSS 클래스 추가

  6. 6

    Vue.js 구성 요소에 사용자 지정 스크립트로드

  7. 7

    vue.js 조건부 CSS 클래스 내부의 배열 요소에 액세스하는 방법

  8. 8

    Vue-클래스 스타일 바인딩을 사용하여 앱에 표시되지 않는 구성 요소 CSS 클래스

  9. 9

    Vue.js에서 활성 클래스 사용

  10. 10

    parsley.js로 사용자 정의 CSS 클래스 추가

  11. 11

    Ember.js를 사용하여 일시적으로 DOM 요소에 CSS 클래스 추가

  12. 12

    클래스를 사용하여 특정 자식 요소에 액세스

  13. 13

    자식 요소 변경 CSS에 활성 클래스가 포함됨

  14. 14

    Moodle에서 양식 요소에 CSS 클래스 추가

  15. 15

    클릭시 자식 요소 가져 오기-Vue JS

  16. 16

    Vue 클래스 구성 요소, Vuex 클래스를 사용하는 ESLint 오류

  17. 17

    JQuery 자동 완성에서 사용자 정의 CSS 클래스 사용

  18. 18

    자바 스크립트에 CSS 클래스가 적용되지 않은 모든 HTML 요소 (라벨) 선택

  19. 19

    클래스가 클래스 CSS 속성을 사용하지 않는 <a> 요소

  20. 20

    자바 스크립트를 사용하여 요소 CSS 클래스 런타임을 변경하는 방법

  21. 21

    Polymer를 사용하여 요소에 조건부로 CSS 클래스 추가

  22. 22

    CSS 전처리기를 사용하여 요소에있는 클래스 참조

  23. 23

    두 클래스 사이에 요소가있는 CSS 선택기

  24. 24

    Angular JS에서 ngClass를 사용하여 CSS 클래스 연결 및 제거

  25. 25

    Javascipt를 사용하여 요소의 상속 된 (계단식) 상위 CSS 클래스 가져 오기

  26. 26

    @html에서 svelte css 클래스 사용

  27. 27

    Laravel에서 CSS 클래스 사용

  28. 28

    부모 구성 요소 내에서 Vue.js 자식 구성 요소의 데이터를 어떻게 사용합니까?

  29. 29

    동일한 요소의 다른 클래스를 사용하여 클래스에 CSS 추가

뜨겁다태그

보관