Javascript Vue.js：如何更改Vue2滑块组件的颜色

我正在使用vue滑块。 我想更改滑块的颜色。 类名为“vue滑块点工具提示内部”

下图是vue滑块的原始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

.vue滑块点工具提示内部{
字体大小：14px；
空白：nowrap；
填充物：2px 5px；
最小宽度：20px；
文本对齐：居中；
颜色：#fff；
边界半径：5px；
边框颜色：#FBF6F7！重要；
背景色：#FBF6F7！重要；
框大小：内容框；
}

但是我的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>

.slider>>>.vue滑块点工具提示内部{
字体大小：14px；
空白：nowrap；
填充物：2px 5px；
最小宽度：20px；
文本对齐：居中；
颜色：#fff；
边界半径：5px；
边框颜色：#FBF6F7！重要；
背景色：#FBF6F7！重要；
框大小：内容框；
}

此代码也不起作用，因此我需要有人帮助我更改颜色。

请注意，您的

标记为

范围
，这将仅保留此组件模板的样式

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

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

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

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

例如：
在
App.vue
中：

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

为了明确起见，您可能需要添加
！重要信息
适用于所有规则，或加强选择：

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

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

时删除深度选择器）非常感谢，实际上我在App.vue中有一个部分，所以我在那里编写了css代码。然后我就可以解决这个问题了。@yoheimezu它会工作的，但是为了可读性，建议将所有覆盖移动到一个单独的文件中，这样它会更有条理。祝你好运！：）

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