I recently added a package for a type writer effect, but I'm having trouble with it not overriding the CSS styles I've set in the component. Here's an example of what I have:
<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>
</div>
</v-row>
</template>
Here is the style I have implemented:
<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>
The package's code already includes CSS styling, but I want to overwrite it:
<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>
I tried to use this style to override the default one from the package, but it didn't work :
.typewriter-msg
Any advice on how to best approach this?