Как переопределить облачные стили в компонентах Vue?

Question

Сохраним, что у меня есть компонент .Vue, который я где-то собираю Github. Давайте назовем это CompB и мы добавим единый CSS набор правил там голубой заголовок:

CompB.Vue (в зависимости я не принадлежит, возможно, вытащил из Github)

<template> 
    ... 
</template> 

<script> 
    ... 
</script> 

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

Я планирую вложить CompB в свой собственный проект CompA. Теперь, каковы мои варианты переопределения правила области?

Answer 1

Немного поиграв, я думаю, что у меня есть хороший подход.

1. Global переопределяет

   В ситуациях, когда я хочу, чтобы переопределить правила во всех случаях для CompB я могу добавить набор правил с более специфичностью, как это: #app .compb-header { .. }. Поскольку у нас всегда есть только один корень (#app), можно безопасно использовать идентификатор в наборе правил. Это легко переопределяет правила области действия в CompB.

2. Родитель переопределяет

   В ситуациях, когда я хочу, чтобы переопределить как глобальные и контекстные правила. К счастью, VueJS позволяет добавлять как скопированный, так и незашифрованный блок стиля в файл .Vue. Поэтому я могу добавить еще более конкретный набор правил CSS. Также обратите внимание, что я могу передать класс в реквизит CompB со времени Vue обеспечивает встроенный класс и стиль реквизит для всех компонентов:

   // 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 или прохождения классов/стилей в области компонента. Но это может быть не всегда так, когда вы используете компонент, который у вас нет (если вы его не разворачиваете). Кроме того, даже при условии, что всегда есть такие ситуации, когда вы похожи: «Я просто хочу немного отрегулировать это дополнение!». Вышеупомянутые два решения, похоже, отлично подходят для этого.

Answer 2

Вам нужно будет добавить больше удельного веса для вашего 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>