自定义样式 Vuetify 按钮

作为一名从事用户界面开发的开发者，你经常会遇到这种情况：找到一个很棒的库，网站组件搭建起来非常迅速，你感觉自己所向披靡！然而，这种感觉很快就会消失，直到你想修改应用程序的一些默认 CSS 时。然后，你发现自己深陷开发者工具和 Stack Overflow 的泥潭，试图找到解决方案，What selector should I use?却徒劳无功How many lines of !important do I need to add to make this style show up?。😐

今天我们将探讨如何重写 Vuetify 默认按钮的一些行为和样式。请查看下面的 Codepen 示例，了解默认按钮的功能以及我们想要实现的效果：

🎨 按钮宽度

我们先来尝试将按钮样式设置为正方形。Vuetify 的按钮默认高度为36px。
因此，设置按钮高度应该.v-btn { width: 36px; }会创建一个正方形按钮，对吧？
我一开始也是这么想的，但按钮仍然是矩形的 🤔 为了找出问题所在，我打开了开发者工具。当你尝试设置某个元素的样式却发现它没有按预期工作时，一个好的第一步就是查看其底层代码！🛠️ 要
做到这一点，请在项目中右键单击要设置样式的元素，然后选择“检查”（在 Firefox 中为“检查元素”）。接下来，当我们检查带有类名的元素 的样式时，可以看到 Vuetify 的默认样式干扰了我们的正方形计划。 在这里，你可以看到该元素有一个属性，这就是问题的根源。因此，为了让按钮变成正方形，我们需要在样式表中覆盖该属性，如下所示：

div.v-btn

.v-btnmin-width: 64px

.v-btn {
  width: 36px;
  min-width: 36px;
}

🎨 涟漪效应

默认情况下，点击按钮后会出现涟漪效果.v-btn。涟漪
效果的颜色由 Vuetify 根据按钮本身的颜色自动生成。
大多数情况下这非常方便，因为您可以毫不费力地为红色按钮添加漂亮的红色涟漪效果。但是，有时您可能希望涟漪效果呈现不同的颜色。
例如，我希望按钮是浅灰色，而涟漪效果是蓝色。要修改涟漪效果，需要对 Vuetify 的v-ripple指令进行一些修改。您可以使用 Material Design 的颜色调色板名称或主题颜色（主色、辅助色、成功色等）来修改涟漪颜色，如下所示：

 <v-btn v-ripple="{ class: 'primary--text' }">

🎨悬停效果

默认情况下，Vuetify 按钮的悬停效果是背景颜色略深。我想移除这个效果，只保留图标放大这一悬停效果。有趣的是.v-btn:hover { background-color: none; }，尝试移除背景属性或其他任何方法都无效。直到我在开发者工具中向下滚动到最底部，才开始怀疑是::before伪类选择器的问题。::before之前:hover那个效果很棒 😉
以下是如何去除这个隐藏的悬停颜色：

.v-btn::before {
  background-color: transparent;
}

更棒的是，鼠标悬停时放大图标的功能也很容易更改，如下所示：

.v-btn i:hover{
  transform: scale(1.15);
}

好了，就到这里！希望这些小技巧能对你在自己的项目中使用 Vuetify 按钮有所帮助💪

🐣 这篇博文是Vuetify 新手指南系列的一部分。每篇博文都由 Vuetify 核心团队共同撰写。💡
如果您有兴趣投稿，请通过Dev.to 或Vuetify 社区 Discord联系Johanna。