search

cngu / vue-typer

Vue component that simulates a user typing, selecting, and erasing text.
https://cngu.github.io/vue-typer
MIT License
791 stars 51 forks source link

Css not being read in Vue Single File Component #26

Open akinhwan opened 6 years ago

akinhwan commented 6 years ago

I have included the following css, but am still seeing the dynamically generated style for the .typed character as color: #000 black .vue-typer{ font-family: 'Space Mono', monospace; } .vue-typer .custom.char.typed{ color: #FFF !important; }

akinhwan commented 6 years ago

oddly enough .vue-typer { font-family: monospace; } is working, but none of my more specific selectors are working

akinhwan commented 6 years ago

I figured it out...you need to remove scoped from style tag for vue single file components. This should definitely be mentioned in the docs, was about to bash my head in ;)

wowtrxqn commented 5 years ago

I figured it out...you need to remove scoped from style tag for vue single file components. This should definitely be mentioned in the docs, was about to bash my head in ;)

is not work

thooyork commented 5 years ago

try the prefix /deep/ like so:

/deep/ .typed{ color:rgb(255,255,255); }

headStyleColorRed commented 5 years ago

I figured it out...you need to remove scoped from style tag for vue single file components. This should definitely be mentioned in the docs, was about to bash my head in ;)

Jesus Christ! Thank You! I just created another pair of style tags underneat without the scope, as you said, and it worked instantly. Genious hahah :D

GeorgeFlorian commented 3 years ago

/deep/ is being deprecated so we will have to use ::v-deep instead and also !important

If you still want to use scoped which is recommended, you need to do it like this:

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

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

sumihiro commented 3 years ago

my best solution is

::v-deep .vue-typer {
  .custom.char.typed {
    color: #fff;
  }
}
Larkify commented 2 years ago

I figured it out...you need to remove scoped from style tag for vue single file components. This should definitely be mentioned in the docs, was about to bash my head in ;)

Thank you sooooo much...... couldn't figure it out AT ALL.

TavaresDylan commented 2 years ago

my best solution is

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

It works for me , thanx 🙂