Vue.js: How to change the colors of Vue2-slider component

Question

I am using vue-slider. I want to change the color of the slider. The class name is "vue-slider-dot-tooltip-inner".

The picture below is the original css of vue-slider.

Now I want to change border-color and background-color like this.

.vue-slider-dot-tooltip-inner {
    font-size: 14px;
    white-space: nowrap;
    padding: 2px 5px;
    min-width: 20px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    border-color: #FBF6F7;
    background-color: #FBF6F7;
    box-sizing: content-box;
}

So I tried to fix the css code in the vue code.

My template.

<div class="slider">
        <vue-slider
        v-model="value"
        :dragOnClick="true"
        :adsorb="true"
        :marks="data.name"
        :included="true"
        :data="bar"
        :data-value="'id'"
        :data-label="'name'"
        class="vue-slider-rail"
    ></vue-slider>
</div>

css

<style lang="scss" scoped>
    .vue-slider-dot-tooltip-inner {
        font-size: 14px;
        white-space: nowrap;
        padding: 2px 5px;
        min-width: 20px;
        text-align: center;
        color: #fff;
        border-radius: 5px;
        border-color: #FBF6F7!important;
        background-color: #FBF6F7!important;
        box-sizing: content-box;
    }
</style>

But my css code did not work, so I tried another css code.

<style lang="scss" scoped>
    .slider >>> .vue-slider-dot-tooltip-inner {
        font-size: 14px;
        white-space: nowrap;
        padding: 2px 5px;
        min-width: 20px;
        text-align: center;
        color: #fff;
        border-radius: 5px;
        border-color: #FBF6F7!important;
        background-color: #FBF6F7!important;
        box-sizing: content-box;
    }
</style>

This code also did not work, so I need someone to help me out to change the colors.

Answer 1

Note that your <style> tag is marked is scoped , which will keep your style only for this component template.

The style you are trying to change is actually a different component, having a different identifier.

When overwriting library components, you'll have to do it in a non-scoped style.

Personally, I'd recommend creating an overrides.sass file with all the different styles you wish to override in your app, and call it from a top-level component with no scoped attribute.

Example: in App.vue :

<style lang="sass">
  @use './style/overrides.sass'
</style>

and in /style/overrides.sass :

.vue-slider-dot-tooltip-inner
  font-size: 14px
  white-space: nowrap
  padding: 2px 5px
  min-width: 20px
  text-align: center
  color: #fff
  border-radius: 5px
  border-color: #FBF6F7!important
  background-color: #FBF6F7!important
  box-sizing: content-box

For the sake of specificity, you might want to add !important to all rules, or make the selection stronger:

.vue-slider-dot-tooltip .vue-slider-dot-tooltip-inner
  font-size: 14px
  ...