Each typed letter has "color:#000" and css is not working

[GeorgeFlorian]

I have the following inside a random component:

<script>
import { VueTyper } from "vue-typer";

export default {
  name: "WhyHow",
  components: {
    VueTyper,
  },
};
</script>

<template>
<div>
<vue-typer
  :text='["Arya Stark"]'
  :repeat='0'
  :shuffle='false'
  initial-action='typing'
  :pre-type-delay='70'
  :type-delay='70'
  :pre-erase-delay='2000'
  :erase-delay='250'
  erase-style='clear'
  :erase-on-complete='false'
  caret-animation='smooth'
></vue-typer>
</div>
</template>

<style scoped lang="css">
@keyframes rocking {
  0%,100% {transform: rotateZ(-10deg);},
  50%     {transform: rotateZ(10deg);}
}

.vue-typer {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
.vue-typer .custom.char.typed {
  color: #009688;
}
.vue-typer .custom.char.selected {
  color: #E91E63;
}

.vue-typer .custom.caret {
  animation: rocking 1s ease-in-out 0s infinite;
}
.vue-typer .custom.caret.typing {
  background-color: #009688;
}
.vue-typer .custom.caret.selecting {
  display: inline-block;
  background-color: #E91E63;
}
</style>

Yet, every span that gets created for each letter has color:#000.

[GeorgeFlorian]

I gather that this repo is not being watched anymore. I'm still experiencing issues with this. I cannot change the style at all.

I have tried:

  .vue-typer .custom.char.typed {
    color: #fff;
  }
::v-deep .typed {
  color: #fff;
}
/deep/ .typed {
  color: #fff;
}
>>> .typed {
  color: #fff;
}

And nothing renders the text white. NOTHING.

Sad to say, but this component is not working.

[GeorgeFlorian]

This is the solution I've found to work:

  ::v-deep .typed {
    color: #fff !important;
  }

That is the only thing that allowed me to set CSS rules to it.

[samdb]

Thanks @GeorgeFlorian, I was tearing my hair out with this one. It works for me too 🙏

[sushil-kamble]

This worked for me, You can add !important if it doesn't

To Change the color of the text

::v-deep .typed {
  color: #2979ff !important;
}

To Change the color of caret

::v-deep .custom.caret {
  width: 3px;
  margin-left: 3px !important;
  background-color: #2979ff !important;
}