证明-使用作用域CSS覆盖模板插槽

Question

我遇到了一些在自动完成中覆盖插槽上的CSS的问题。我读了这篇文章，并尝试了多种解决方案，但没有一种可行(因为它们全局地改变了vuetify组件的样式)：How to override vuetify styles?

如何覆盖自动完成样式？例如，现在我的问题是，我在搜索字段中添加了一个带有按钮的append-slot，但是文本字段的填充将它向左推了太多&底部没有填充。

​

​

我尝试了一些方法:创建一个具有ID的父元素，然后手动尝试为它创建一个类。

示例：

#handlesearch > div > div > div.v-input__slot > div.v-select__slot > div {
  margin-top: 4px !important;
}


     <template id="handlesearch" slot="append">
       <v-btn
      >Sök</v-btn
     >
   </template>

Answer 1

如果您检查您的html，您将注意到在<template>上添加ID不起作用。如果您将id="handlesearch"移动到插槽中的实际html元素，在本例中为v-btn。

<template slot="append">
    <v-btn id="handlesearch">Sök</v-btn>
</template>

使用下一个作用域样式

<style scoped>
    #handlesearch {
      background: red;
    }
</style>

生成下一个结果：

​

​

如果我将id="handlesearch"移动到<template>，因为<template id="handlesearch">样式将不会被应用，因为在我的DOM中没有具有该id的HTML元素。

解决方案

将您的ID移动到您的槽中的实际元素，并根据它添加作用域样式。