el-button按钮样式不生效

el-button写在template标签内，type="primary"的样式不生效，如何解决？

           <el-form-item :label="$t('deviceList.deviceArea')" prop="deviceArea">
                <el-input v-model="editDataMid.deviceArea" disabled>
                    <template slot="append">
                        <el-button  @click="handleEdit"  type="primary" size="mini">点击</el-button>
                    </template>
                </el-input>
             </el-form-item>

改不了，源码就是这样的，

node_modules/element-ui/lib/theme-default/index.css 这是样式文件，你可以找找然后格式化看看就知道了。

【相关推荐】

• 这篇博客也许可以解决你的问题👉 ：修改el-button的样式
• 除此之外, 这篇博客: Element el-button 按钮组件详解中的 3. 按钮样式 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  Element提供了朴素按钮、圆角按钮、圆形按钮，需要注意的是圆形按钮一般只放一个图标进去，代码如下：

      按钮样式：
      <el-button type="primary" plain>朴素按钮</el-button>
      <el-button type="primary" round>圆角按钮</el-button>
      <el-button type="primary" circle icon="el-icon-search"></el-button>
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

原样式被 覆盖了：

只能自己加个类名 控制

比如：

.el-input-group__append > .btn{
  background-color:red !important; 
}