Vue.js：如何更改 Vue2-slider 组件的颜色答案

【问题标题】：Vue.js: How to change the colors of Vue2-slider componentVue.js：如何更改 Vue2-slider 组件的颜色
【发布时间】：2021-03-26 22:40:33
【问题描述】：

我正在使用 vue-slider。我想改变滑块的颜色。类名是“vue-slider-dot-tooltip-inner”。

下图是vue-slider的原始css。

现在我想像这样更改边框颜色和背景颜色。

.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;
}

于是我尝试修复vue代码中的css代码。

我的模板。

<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>

但是我的 css 代码不起作用，所以我尝试了另一个 css 代码。

<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>

这段代码也不起作用，所以我需要有人帮我改变颜色。

【问题讨论】：

您是否看到开发工具中的样式被其他规则覆盖，或者您根本没有看到上面的规则？
我没有看到上面的规则。
在我提交答案之前，让我们确保这不是范围问题。如果您从样式定义中删除scoped，您看到规则了吗？（删除scoped时可以删除>>>深度选择器）

标签： javascript html css vue.js sass

【解决方案1】：

请注意，您的<style> 标签标记为scoped，这将只保留此组件模板的样式。

您尝试更改的样式实际上是不同的组件，具有不同的标识符。

在覆盖库组件时，您必须以非作用域样式进行。

就个人而言，我建议创建一个 overrides.sass 文件，其中包含您希望在应用中覆盖的所有不同样式，并从没有 scoped 属性的顶级组件中调用它。

示例：在App.vue:

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

在/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

为了具体起见，您可能希望将!important 添加到所有规则中，或者使选择更强：

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

【讨论】：

非常感谢，实际上我在 App.vue 中有
@YoheiUmezu 它会起作用，但为了便于阅读，建议将所有覆盖移动到一个单独的文件中，以便更有条理。祝你好运！ :)