如何在 Vuetify 中使用变亮或变暗的颜色作为 v-btn 的背景？
我在 vuetify 上有一个这样的按钮：
<v-btn color="blue" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
结果是这样的：
现在我尝试这样做：
<v-btn class="blue lighten-4" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
但结果是这样的：
虽然我期待的只是浅色。
我怎样才能实现我的目标？注意这里使用的是vuejs 2。
I have a button like this on vuetify:
<v-btn color="blue" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
And the result is this:
Now I try to do this:
<v-btn class="blue lighten-4" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
But the result is this:
While I was expecting just a lightened colour.
How can I achieve my goal? Note that here vuejs 2 is used.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我通过这样写解决了这个问题：
这是因为图标被视为文本而不是背景
编辑：
正如 @Adam Muse 指出的，更好的解决方案可能是将类添加到
< ;v-icon>标签：I solved it by writing this:
This is because the icon is considered as text and not as background
EDIT:
As @Adam Muse pointed out, a better solution could be adding the class on the
<v-icon>tag:将颜色添加到您的 v 图标中
我会避免使用 blue--text 内嵌它，
您也可以使用 class="blue--text" 作为文本
Add the color to your v-icon
I'd avoid in-line stying it with blue--text
you can also use class="blue--text" for text