如何设置具有插槽'append'属性的 el-button 的样式

Question

我正在使用Nuxt和Element UI构建Web应用程序。 现在，我正在创建一个如下所示的搜索。

https://gyazo.com/644132bd6ab45714668281eed296940f

我想使按钮的背景颜色为红色，但是，不知何故，样式不适用于搜索按钮。(按钮内有一个房间(

我该如何解决它？

这是我的代码。

• 搜索框

<template>
<div>
<el-input type="text">
<el-button slot="append" style="background-color: red;">Search</el-button>
</el-input>
</div>
</template>

Answer 1

元素 UI 按钮具有el-button类，如果您检查该元素，您可以看到这一点。

不建议更改附加/预置到el-input的元素的背景颜色，因为如果您更改按钮的背景颜色，它将失去附加的"效果"，因此它只会向您显示一个按钮和输入保持在一起。但是，如果你想这样做，尽管如此，请参考el-button类：

.el-button {
background: #f00;
}

PS：您可能需要用任何div 包装该按钮，并在该div 内部引用 buton