I have installed a package for type writer but it's not overwriting the css I have implemented in the component. Below is an example :
<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>
Then this is a style below :
<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>
Code of the package, has the css already, but wanted to override 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>
So this is the style I want to use to overwrite the one in the package, but I implemented it and it's not working :
.typewriter-msg
How best is this done ?
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>