如何更改Elementui组件样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何更改Elementui组件样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

作为一个后端开发人员，因工作需要，前端也要写，最近刚开始使用前端vue和elementui开发前端页面时，碰到了一些问题。产品图上的样式与elementui组件样式不同。后经查阅资料发现了更改elementui组件自带样式的方法，现分享如下:

如果我们想修改一个button按钮的样式该如何做：

首先，我们在浏览器用F12打开开发者模式，并点击此功能后点击我们想要更改的样式标签修改element组件样式,elementui,vue.js,前端

修改element组件样式,elementui,vue.js,前端

我们可以看到在标签上显示的一些class属性 .el-button(按钮) .el-button-warning(按钮警告颜色) .el-button-mini(按钮size=“mini”的大小),然后我们就可以通过::v-deep .el-button{}修改按钮的样式了。

举个例子，比如我想用的icon图标在elementui库里面没有，我就想到了在按钮中加图片的方法，但我无论如何改变按钮的大小或者图片大小也无法让图片和文字处于同一行。这个时候我们就可以通过此方法在按钮中加图片的方式完成此操作。

代码如下：

 <el-button @click="exportDetailFile">
       <img src="@/assets/images/icon-export.png" class="icon-export-detail"/>导出
 </el-button>

样式：

::v-deep .sg-button >span{
    display: flex;
    align-items: center;
  }
.icon-export-detail {
  width: 15px;
  height: 15px;
}

完成后样式为

修改element组件样式,elementui,vue.js,前端

之所以用 .sg-button>span是因为我在开发者模式中看到按钮文字所在区域为span，我们的图片和文字在同一区域。采用flex布局即可将图片与文字放在同一行内

修改element组件样式,elementui,vue.js,前端

注意，此样式修改会作用于全局，如果加了scoped就只会作用于本组件以及子组件样式。文章来源地址https://www.toymoban.com/news/detail-520069.html

到了这里，关于如何更改Elementui组件样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

如何更改Elementui组件样式