Not able to override styling on tags

[shightower]

Version of Vue I'm using?: 2.5.2

Version of vue-input-tag I'm using?: 1.0.3

codesandbox showing the issue: https://codesandbox.io/s/ly4rr9379

I'm unable to override the default stylings for the actual tags. the following snippet works but (as expected) it only effects the surround div.

.vue-input-tag-wrapper {
background-color: red !important;
}

the moment I try following, all the defined overrides are ignored. In my use case I'm trying to get the tags to be a different color and I'd like the edges to be rounded. I have the css to do this, but it doesn't seem to pick up any of my changes.

.vue-input-tag-wrapper .input-tag {
background-color: red !important;
color: white !important;
}

[mdaliyan]

Overriding styles are possible, this is the code I used before. mind the variables. you need to change them.

.vue-input-tag-wrapper {
  display: inline-flex !important;
  flex-wrap: wrap;
  height: auto;
  .new-tag {
    color: inherit !important;
    font-size: inherit !important;
    width: auto !important;
  }
  .input-tag {
    margin: 2px 4px 2px 0 !important;
    padding: 1px 6px !important;
    background-color: whitesmoke !important;
    border: 1px solid darken(whitesmoke, 15%) !important;
    color: $input-color !important;
    .remove {
      &:before {
        content: "\00d7" !important;
        vertical-align: text-bottom;
      }
      color: lighten($text-color,20%) !important;
      margin-left: 5px;
      &:hover {
        color: $danger !important;
      }
    }
  }
  .rtl & {
    .input-tag {
      margin: 2px 0 2px 4px !important;
      .remove {
        margin-left: 0;
        margin-right: 5px;
        float: left;
      }
    }
  }
}

[shightower]

With the help of someone else I figured out the problem. I didn't realize this about Vue, but the issue was the fact I was trying to override the styles in a scoped styling block. Once I moved this to a none scope styling block everything worked fine.

[matiastucci]

Sorry I didn’t answer. I’m on vacations without my laptop. But I’m glad you could figure it out thanks to @mdaliyan.

[mdaliyan]

I got the credit, lol

and @shightower, I prefer not to use styles in .vue files if I have a separated css file unless a special case comes up (eg. one time styles). It makes the development faster for me. Just saying.

Best practices change over time. See how you feel about your code and how easy you work with it.