Vue stepping on the pit trip (3) — изменение стиля подкомпонента

Vue.js

в компоненте vue как<style>Вкладка открытаscopedатрибут, чтобы стиль влиял только на этот компонент и не загрязнял другие компоненты.

В проекте нам часто приходится внедрять внешние UI-компоненты (такие как elementUI, mint-ui), но добавлять в родительский компонентscopedПосле установки свойства стиль родительского компонента не будет проникать в дочерний компонент, поэтому запись стиля дочернего компонента в родительском компоненте не имеет никакого эффекта.

Существует несколько способов изменить стили дочерних компонентов:

1. Удалить область действия

в родительском компоненте<style>удалено изscopedПосле этого стили дочерних компонентов можно прописать в родительском компоненте. Но это загрязнит стили в других компонентах

2. Смешение локальных и глобальных стилей

Вы можете использовать как стили с областью, так и стили без области в одном компоненте:

<style lang="sass" scoped>
/* 本地样式 */
</style>
<style lang="sass">
/* 全局样式
*  修改子组件样式，最好在子组件外嵌套一个类
*/
</style>

3. Глубокий селектор

Если вы хотите, чтобы селектор в стиле с ограниченной областью действия шел «глубже», например, воздействуя на дочерние компоненты, вы можете использовать оператор >>>:

<template>
  <div id="app">
    <my-header></my-header>
  </div>
</template>

<style scoped>
  .myHeader >>> .title {
    color: red;
  }
</style>

<div class="myHeader">
  <div class="title"></div>
</div>

Некоторые препроцессоры, такие как SASS, неправильно анализируют>>>. В этом случае вы можете использовать/deep/оператор вместо этого - это>>>псевдонимы, то же самое работает нормально.

<style scoped>
  .myHeader /deep/ .title {
    color: red;
  }
</style>

Такой способ написания и изменения стиля подкомпонента не загрязнит глобальный стиль!

Примечание: черезv-htmlНа созданный контент DOM не влияют стили в области видимости, но вы все равно можете стилизовать его с помощью глубоко действующих селекторов.

Категории