从 vuetify 按钮中删除覆盖

Question

我有一个在组件内部使用的 v-btn。问题是我需要从按钮上删除覆盖层。就 API 而言，我能找到的最接近的是 Ripple，这不是我想要的。当我查看源代码时，我可以看到我从这里获取了叠加层：

.v-btn--plain:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover) .v-btn__content {
  opacity: 0.62;
}

我正在实现视图按钮，例如：

<v-btn plain class='yellowButton' id='ResourceBtn' @click="SubmitForm()" >Submit</v-btn>

我尝试过以下 CSS，但没有成功：

<style scoped>
.v-btn--plain:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover) .v-btn__content{
  opacity: 1 !important;
}
.yellowButton{
    background-color: #FFD007;
    color: #0033A1 !important;
    font-size:16px;
    font-weight: 600;
    letter-spacing: -.25px;
    opacity: unset !important;

}
.yellowButton span.v-btn__content{
  opacity:inherit !important;
}
</style>

任何有关我所缺少的内容的建议将不胜感激。

Answer 1

.yellowButton :deep(.v-btn__overlay) {
  opacity: 0;
}

应该可以解决问题