Блог

Я установил пакет для type writer, но он не перезаписывает css, который я реализовал в компоненте. Ниже приведен пример :

 <template>
  <v-row class="hero" align-content="center">
      <div class="msg">
        <typewriter
            :speed="200"
            :full-erase="true"
            :cursor="true"
            :interval="300"
            :words='["Student","Mentor", "Parent"]'>
          Join as a
        </typewriter>
  </v-row>
</template>
 

Тогда это стиль ниже :

 <style lang="scss" scoped>

.msg {
  font-size: 1.9em;
  font-weight: bolder;
}
.typewriter-msg {
  color: #ff0048;
  border-bottom: 2px solid red;
  font-weight: 600;
}

</style>
 

Код пакета, уже имеет css, но хотел переопределить его:

 <template>
  <span class="typewriter">
  <slot></slot>
  <span
    class="typewriter-msg"
    :class='{"typewriter-selected":isFullErasing}'>{{ typing }}</span>
    <span class="typewriter-cursor" v-if="cursor">{{ cursorSymbol }}</span>
  </span>
</template>
 

Итак, это стиль, который я хочу использовать для перезаписи того, что есть в пакете, но я его реализовал, и он не работает :

 .typewriter-msg
 

Как это лучше всего сделать?

scoped Атрибут (т.Е. <styles scoped> ) Ограничивает стили родительским компонентом и, следовательно, не влияет на внутренние дочерние элементы.

Вы можете либо удалить этот атрибут, чтобы стили применялись в целом, достигая элементов typewriter компонента.

Или вы можете добавить к стилям префикс с помощью deep selector ( >>> ):

 <style scoped>
>>> .msg {
  font-size: 1.9em;
  font-weight: bolder;
}
>>> .typewriter-msg {
  color: #ff0048;
  border-bottom: 2px solid red;
  font-weight: 600;
}
</style>
 

ДЕМОНСТРАЦИЯ