vuetify js自定义样式答案

【问题标题】：vuetify js custom stylevuetify js自定义样式
【发布时间】：2019-02-23 12:11:35
【问题描述】：

如何在没有变量的情况下编辑/更改 vuetify css 样式？目前，v-btn 有它的样式，而作用域没有帮助。我必须对每个单独的 css 属性使用 !important，这很烦人。还有其他方法可以将我自己的自定义样式用于任何 vuetify 组件吗？

new Vue({ el: '#app' })

.block{
  background: rgb(3, 237, 245) ;
  margin: 10px;
  height: 60px; 
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.267);
  border-radius: 15px;
  font-family: 'Cookie' ;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  width: 200px;
  
}
.wrapper{
  background-color: rgb(0, 126, 131);
}
.block:hover{
  box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.267);
  transform: none;
}
.block:active{
  box-shadow: inset 2px 2px 10px 5px rgba(0, 0, 0, 0.267);
  transform: none;

}

<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container class="wrapper">
        <div >
          <v-btn class="block " >
            V-Button
          </v-btn>
          <button  class="block  " >
            Button
          </button>
         </div>
          </v-container>
      </v-content>
    </v-app>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  
</body>
</html>

【问题讨论】：

“作用域没有帮助”是什么意思，为什么必须使用 !important？作用域cssworks fine，还有ways to avoid using !important
我的意思是，即使我使用自己的样式 scoped ，也没有任何改变，vuetify 默认样式仍然占上风。
第一个链接的答案解释了如何在 vuetify 中使用作用域样式，然后第二个链接的答案解释了更多关于 CSS 特异性的信息，它允许我们避免使用 !important。大概，您想更改特定按钮/组件的样式，而不是全局更改？如果您想为所有组件应用样式，请更改预定义的触控笔变量。那么有很多更好的阅读文档。（如果不是全局性的，那么如果您按照文档中的 vuetify 安装说明进行操作，请尝试了解链接的答案）

标签： javascript vue.js vuetify.js

【解决方案1】：

通过在我的 css 中创建更具体的选择器链，我已经成功地覆盖了几乎所有 vuetify 组件样式。为此，我将自己的类添加到组件中，然后在 css 中使用默认的 vuetify 类定位该类。

例如，<v-switch> 组件。在其“关闭”状态（其 v-model 为假），默认情况下开关变为灰色。我希望它在这种状态下改变它的颜色，所以我只是添加了一个类并在 css 中进行了更改。

html/模板：

<v-switch
    v-model="myModel"
    color="primary"
    class="off-state-orange"
  ></v-switch>

css:

.orange-off-state .v-input__control .v-input__slot .v-input--selection-controls__input .v-input--switch__track {
  color: #f2a444;
}

.orange-off-state .v-input__control .v-input__slot .v-input--selection-controls__input .v-input--switch__thumb {
  color: #f2a444;
}

【讨论】：

【解决方案2】：

Vue Cli 3 出了点问题。我在 Vue Cli 2 上做了同样的事情，并且“作用域”按预期工作。

【讨论】：