在没有 !important 的情况下覆盖 vuetify答案

【问题标题】：Override vuetify without !important在没有 !important 的情况下覆盖 vuetify
【发布时间】：2019-06-29 02:40:37
【问题描述】：

我想应用自定义 CSS 并覆盖一些默认的 Vuetify 颜色。例如，成功按钮可以很容易地被覆盖：

.success-button {
  background-color: $sb--color-success !important;
}

但是有没有办法在不使用!important 的情况下做同样的事情？我都试过了：

body .success-button {
    background-color: $sb--color-success;
}

button .success-button {
  background-color: $sb--color-success;
}

没有!important怎么办？

【问题讨论】：

Vuetify 默认使用!important 的颜色，你需要!important 覆盖其他重要规则
你的问题太宽泛了。你想做什么？替换默认颜色（主题）？或者您可以在.styl 中使用不同的值... 或者如果特异性是问题stackoverflow.com/a/51728504/1981247，则了解更多关于特异性的信息这些问题可能已经得到解答（或在文档中进行了解释），但无法知道您想要什么。

标签： vue.js vuetify.js

【解决方案1】：

你可以试试这个思路

// src/index.js

// Libraries
import Vue from 'vue'
import Vuetify from 'vuetify'

    // Helpers
    import colors from 'vuetify/es5/util/colors'

    Vue.use(Vuetify, {
      theme: {
        primary: colors.red.darken1, // #E53935
        secondary: colors.red.lighten4, // #FFCDD2
        accent: colors.indigo.base // #3F51B5
      }
    })

或者类似的东西

 <h1 class="subheading grey--text">DASHBOARD</h1>

【讨论】：

'index.js' 和'main.js' 一样吗？只要我根本没有 index.js 文件。
可能是。你在哪里导入 vuetify？
在这个 main.js 中。谢谢，我会试试你的解决方案
@Desiigner 如果解决方案对您有帮助，您应该接受提供的答案:)