Vue 구성 요소에서 범위 지정 스타일을 재정의하는 방법

Vue 구성 요소에서 범위 지정 스타일을 재정의하는 방법

저장해두자..Vue어디선가 기써브에서 빼낸 부품이야CompB라고 하고 파란색 헤더에 대해 단일 CSS 규칙 집합을 추가합니다.

CompB.Vue(자신이 소유하고 있지 않은 의존관계, 아마도 Github에서 취득한 것)

<template>
  ...
</template>

<script>
  ...
</script>

<style lang="scss" scoped>
  .compb-header {
    color: blue;
  }
</style>

CompB를 제 프로젝트의 CompA에 포함시킬 예정입니다.이제 범위 지정 규칙을 재정의하기 위한 옵션은 무엇입니까?

조금 놀다 보니 좋은 접근법이 생긴 것 같아요.

1. 글로벌 재정의

   CompB의 모든 경우에 규칙을 덮어쓰고 싶은 경우 다음과 같이 보다 구체적인 규칙 집합을 추가할 수 있습니다.#app .compb-header { .. }루트는 항상 1개밖에 없기 때문에 (*)#app) 규칙 집합에서 ID를 사용하는 것이 안전합니다.이는 CompB의 범위 지정 규칙을 쉽게 덮어씁니다.

2. 부모 덮어쓰기

   글로벌 규칙과 범위 규칙을 모두 덮어쓰려는 경우.다행히 VueJ에서는 스코프와 비스코프 스타일의 양쪽 블록을 에 추가할 수 있습니다.Vue 파일따라서 보다 구체적인 CSS 규칙 집합을 추가할 수 있습니다.또한 Vue는 모든 컴포넌트에 내장 클래스 및 스타일 소품을 제공하기 때문에 CompB의 소품으로 클래스를 전달할 수 있습니다.

   // in CompA (the parent)
   
   <template>
     ...
     <!-- Vue provides built-in class and style props for all comps -->
     <compb class="compb"></compb>  
   </template>
   
   <script>
     ...
   </script>
   
   <style lang="scss">
     #app .compb .compb-header { 
       color: red; 
     }
   </style>
   
   <style lang="scss" scoped>
     ...
   </style>
   

   (주의: CompB로 전달되는 클래스에 다음과 같은 고유한 이름을 붙일 수 있습니다..compa-compb또는 CompB 및 클래스를 사용하는 다른 컴포넌트와 충돌할 가능성이 없도록 해시 접미사를 사용합니다..compb그러나 대부분의 어플리케이션에서는 과잉일 수 있습니다.)

3. 물론 CompB는 CSS를 조정하거나 클래스/스타일을 컴포넌트 영역으로 전달하기 위한 자체 추가 소품을 제공할 수 있습니다.그러나 소유하지 않은 컴포넌트를 사용하는 경우(포크가 아닌 경우)에는 항상 해당되지 않을 수 있습니다.또, 이것을 제공해도, 「그 패딩을 조금만 조정하고 싶다!」라고 하는 상황이 항상 있습니다.이 경우 위의 두 가지 솔루션이 매우 효과적일 수 있습니다.

css에 특정 가중치를 추가해야 합니다.해당 컴포넌트를 덮어쓸 수 있도록 다른 클래스로 랩해야 합니다.여기 완전한 코드가 있습니다.

<template>
  <div class="wrapper">
    <comp-b>...</comp-b>
  </div>
</template>

<script>
import CompB from 'xxx/CompB'

export default {
  components: {
    CompB
  }
}
</script>

<style>
  .wrapper .compb-header {
    color: red;
  }
</style>

언급URL : https://stackoverflow.com/questions/41133833/how-to-override-scoped-styles-in-vue-components