如何为具有插槽“附加”属性的 el 按钮设置样式答案

【问题标题】：How to style el-button that has slot 'append' attribute如何为具有插槽“附加”属性的 el 按钮设置样式
【发布时间】：2020-04-15 21:27:31
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： vue.js nuxt.js element-ui

【解决方案1】：

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

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

.el-button {
    background: #f00;
}

P.S：您可能需要用任何 div 包裹该按钮，并在该 div 内引用按钮

【讨论】：