Пользовательский стиль vuetify js
Как я могу редактировать / изменять стили vuetify css без переменных? В настоящее время v-btn имеет свои стили, а scoped не помогает. Я должен использовать! Important для каждого отдельного свойства css, что меня раздражает. Есть ли другие способы использовать мои собственные стили для любого компонента 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>Я имею в виду, что даже когда я использую свои собственные стили, ничего не меняется, стиль vuetify по умолчанию все еще преобладает.
Первый связанный ответ объясняет, как использовать стили с областью видимости в vuetify, затем второй связанный ответ объясняет больше о специфичности CSS, которая позволяет нам избежать использования! Important. Предположительно, вы хотите изменить стиль для определенных кнопок / компонентов, а не глобально? Если вы хотите применить стили для всех компонентов, измените предварительно определенные переменные пера. Тогда есть много документов, которые лучше читать. (если не глобально, попробуйте найти связанные ответы, если вы следовали инструкциям по установке vuetify из документов)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Что-то было не так с Vue Cli 3. Я сделал то же самое с Vue Cli 2, и "scoped" работал, как ожидалось.
Мне удалось переопределить почти все стили компонентов vuetify, создав более конкретную цепочку селекторов в моем CSS. Я делаю это, добавляя свой собственный класс к компоненту, а затем в css нацелив этот класс на классы vuetify по умолчанию после.
Например, компонент <v-switch>. В состоянии «выключено» (его v-модель - false) по умолчанию переключатель становится серым. Я хотел, чтобы он изменил свой цвет в этом состоянии, поэтому я просто добавил класс и изменил его в 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;
}
Что вы имеете в виду под словом «область видимости не помогает» и почему вы должны использовать! Important? Область видимости css работает отлично, и есть способы избежать использования! important