vuetify的库如何强制修改默认的样式属性？

Question

我希望能做到点击一个按钮之后将该按钮的样式修改为选中状态，但是除了行内样式能强制修改组件样式以外，我想通过vue3的动态样式来显示选中的样式，但是样式无法覆盖默认样式
HTML

<v-btn @click="isDeepThink = !isDeepThink"  :class="{ isActive: isDeepThink }">深度思考</v-btn>

CSS

.isActive::v-deep {
  border-color: #A4C1E8 !important;
  background-color: #F1F5FE !important;
  color:#2A6BED !important;
}

javascript

import { ref,watch } from 'vue'
const isDeepThink = ref(false)

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

Vuetify 提供了多种方式来修改默认样式，以下是一些常见的方法：

1. 使用 ::v-deep 选择器

.v-btn::v-deep {
  /* 你的样式代码 */
}

这将在 Vuetify 的样式中添加你的样式代码。

1. 使用 v-bind 将样式绑定到组件上

<template>
  <v-btn v-bind:style="{ backgroundColor: 'red' }">按钮</v-btn>
</template>

这将将背景颜色设置为红色。

1. 使用 v-slot 将样式插入到组件中

<template>
  <v-btn v-slot:default="{ attrs }">
    <v-btn v-bind="attrs" style="background-color: red;">按钮</v-btn>
  </v-btn>
</template>

这将将背景颜色设置为红色。

1. 使用 vuetify 的 theme 选项

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  theme: {
    primary: 'red'
  }
})

这将将 Vuetify 的主题颜色设置为红色。

1. 使用 !important 语句强制覆盖默认样式

.v-btn {
  background-color: red !important;
}

这将将背景颜色设置为红色，并强制覆盖默认样式。

代码示例

以下是一个使用 ::v-deep 选择器修改 Vuetify 按钮样式的示例：

<template>
  <v-btn @click="handleClick">按钮</v-btn>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$refs.button.style.backgroundColor = 'red';
    }
  }
}
</script>

<style>
::v-deep .v-btn {
  background-color: red;
}
</style>

在上面的示例中，我们使用 ::v-deep 选择器将背景颜色设置为红色，并使用 @click 事件处理函数将背景颜色更改为红色。