如何更改 Vuetify v-overflow-btn 的底部边框颜色？答案

【问题标题】：How to change the bottom border color of a Vuetify v-overflow-btn?如何更改 Vuetify v-overflow-btn 的底部边框颜色？
【发布时间】：2019-12-26 18:58:08
【问题描述】：

我实际上是在使用 Vuetify 在 nuxt.js 中构建一个网站。我创建了一个基于一个v-overflow-btn、一个v-text-field 和一个v-btn 的菜单。 Here is what my menu looks like actually.

因为我有点疯狂，我想更改我的v-overflow-btn 的底部边框颜色以匹配我菜单中所有不同的分隔线颜色条。默认情况下，颜色为黑色。

我已经尝试在样式部分定义自己的 CSS，如下所示：

<style>
  v-overflow-btn {
    border-color:grey !important;
  }
</style>

但没有任何改变......

有人可以帮我改变这个边框颜色吗？在此先感谢:)

【问题讨论】：

标签： css vuetify.js nuxt.js

【解决方案1】：

试试这个

<style>
  .v-overflow-btn .v-input__slot::before {
    border-color: grey !important;
  }
</style>

【讨论】：

工作得很好！非常感谢 :) 我试过 .v-input__slot 但我忘记了 ::before --'
不客气。顺便说一句，如果您通过旁边的勾选按钮接受此答案，您将获得一些声望点。

【解决方案2】：

我必须添加深度选择器以防其他人遇到此问题。

.nbb >>> .v-input__slot:before  {
  border-color: white !important;
}

【讨论】：