Instalé un paquete para escritor de tipos pero no sobrescribe el css que implementé en el componente. A continuación se muestra un ejemplo:
<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>Entonces este es un estilo a continuación:
<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>Código del paquete, ya tiene el css, pero quería anularlo:
<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>Así que este es el estilo que quiero usar para sobrescribir el del paquete, pero lo implementé y no funciona:
.typewriter-msg¿Cómo se hace esto mejor?
El atributo con scoped (es decir, <styles scoped> ) hace que los estilos tengan como ámbito el componente principal y, por lo tanto, no afectaría a los elementos secundarios internos.
Puede eliminar ese atributo para que los estilos se apliquen de forma general, alcanzando los elementos del componente de typewriter de escribir.
O puede prefijar los estilos con el selector profundo ( >>> ):
<style scoped> >>> .msg { font-size: 1.9em; font-weight: bolder; } >>> .typewriter-msg { color: #ff0048; border-bottom: 2px solid red; font-weight: 600; } </style>