Vuetify - 구성 요소 내부 CSS가 작동하지 않음(효과 발생)

Vuetify - 구성 요소 내부 CSS가 작동하지 않음(효과 발생)

사례 1
우리는 렌더링된 vuetify 요소에 사용자 정의 스타일을 적용하려고 한다.

<template>
    <v-text-field v-model="name" label="Name" />
</template>

<style scoped>
.input-group__input {
    background: red;
}
</style>

그러나 아무런 변화도 없다.

---

사례 2
We are trying to style elements rendered by v-html (e.g. external html). For example, we try to apply custom width and height on the img, but it doesn't work:

<template>
    <div v-html="customHTML"></div>
</template>

<script>
export default {
    data: () => ({
        customHTML: `<img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">`;
    })
}
</script>

<style scoped>
img {
    width: 200px;
    height: 200px;
}
</style>

이러한 요소에 사용자 정의 CSS를 적용하는 방법

참고: 문서별로 스타일을 포함시키십시오.
또한 구성 요소가 파손된 경우 앱이 내부에 포장되어 있는지 확인하십시오.v-app태그:

<v-app> 
    <v-content>
    //..
    </v-content>
</v-app>

문서에는 다음이 명시되어 있다.

어플리케이션이 제대로 작동하려면 반드시 포장을 해야 한다.v-app구성 요소

---

해결책

사용하다vue-loader의 심층 선택자 >>>다음과 같다:

사례 1:

>>>.input-group__input {
    background: red;
}

사례 2:

>>>img {
    width: 200px;
    height: 200px;
}

그러니 제거할 필요가 없다.scoped에서 귀속시키다.<style>꼬리표를 달다

사전 처리자에 대한 문서(예: 사용 중인 경우)에서 추출<style lang="scss" scoped>):

Sass와 같은 일부 사전 처리자는 구문 분석하지 못할 수 있다.>>>알맞게이 경우 다음 기능을 사용하십시오./deep/대신에 콤비네이터 - 의 별칭이다.>>>정확히 똑같이 작용한다.

참고: 딥 셀렉터가 구현된 위치

설명

두 경우 모두 스타일링하려는 요소가 구성요소의 일부가 아니므로 CSS 변경사항이 적용되지 않는다.data-v-xxxxxxx속성, 사용 시 현재 범위(구성 요소)의 스타일링 요소에 사용<style scoped>.
사용시scoped속성 우리는 vue에게 css를 다음 요소에만 적용하라고 말한다.data-v-xxxxxxx중첩된 요소는 제외.따라서 우리는 딥 셀렉터를 명시적으로 사용할 필요가 있다.

예를 들어, 만약의 경우#1렌더링한<v-text-field>그렇게 보일 것이다:

// notice `data-v-61b4012e` here:
<div data-v-61b4012e class="input-group input-group--text-field primary--text">
    <label>Name</label>
    <div class="input-group__input"> // and notice no `data-v-61b4012e` here
        <input tabindex="0" aria-label="Name" type="text">
    </div>
    <div class="input-group__details"></div>
</div>

그리고 만약의 경우에#2렌더링한v-html다음과 같다:

<div data-v-61b4012e> // notice `data-v-61b4012e` here  
    // and no `data-v-61b4012e` on image
    <img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">
</div>

아직도 안 돼?

일부 스타일(인라인 스타일)을 재정의하려고 할 때 이 솔루션이 작동하지 않는 경우 CSS 특수성에 대해 자세히 알아보기를 원할 수 있다.

---

벌레?
타겟팅이 제대로 되어 있고 딥 셀렉터를 사용한다고 해도 기대했던 대로 스타일이 적용되지 않을 가능성이 있다.렌더링 html의 상위 요소 중 하나에 coresusping data-v-xxxxx 속성이 있는지 확인하십시오. 적용하지 않을 경우 사례(버그)가 있을 수 있으므로 범위 css를 통해 대상으로 삼을 방법이 없다.v-select에 의해 렌더링된 v-메뉴가 한 가지 예시였지만, 아마도 미래에 다른 유사한 버그를 만날 수 있을 것이다.

참조URL: https://stackoverflow.com/questions/50985783/vuetify-css-not-working-taking-effect-inside-component