[Vuejs]-Override/Overwrite the existing css of an installed package

by

0👍

The scoped attribute (i.e., <styles scoped>) makes the styles scoped to the parent component, and thus would not affect the inner children elements.

You can either remove that attribute so that the styles apply generally, reaching the typewriter component’s elements.

Or you can prefix the styles with the 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>

demo

Leave a comment