Question

如何在不使用变量的情况下编辑/更改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>

Answer 1

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

Answer 2

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

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

html / template：

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

vuetify js自定义样式

2 个答案: