如何让Vue项目中所有el-button元素样式全局统一修改？

本文共计441个文字，预计阅读时间需要2分钟。

目录 + Vue全局修改el-button样式 + 修改前 + 代码修改 + 样式2 + Vue全局修改el-button样式 + 修改前 + 效果图： + 代码修改 + 在APP.vue文件中，或在某个.vue文件中。 + 在没有scoped属性的style标签内修改： + style lang=sc

目录

• vue全局修改el-button样式
• 修改前
• 代码修改
• 样式2

vue全局修改el-button样式

修改前

效果图：

代码修改

在APP.vue文件，或者某个.vue文件。

在没有scoped的style标签里面修改：

<style lang="scss"> .el-button--primary{ color: #1686f5; background-color: rgb(240, 248, 255); border-color: rgb(148, 197, 238); font-size: 14px; &:hover { color: rgb(240, 248, 255); background-color: rgb(148, 197, 238); border-color: rgb(148, 197, 238); } &:active { color: rgb(240, 248, 255); background-color: rgb(148, 197, 238); border-color: rgb(148, 197, 238); } } <style>

样式2

代码：

.el-button--primary { color: #1c242c; background-color:#f2f6fc; border: none; font-size: 14px; &:hover { color: #2483ff; background-color: rgb(242,246,252); } &:active { color: #2483ff; background-color: rgb(242,246,252); } }

因为本案例修改了primary类型的el-button按钮样式，如果项目中使用了饿了么的this.$confirm，因为确定按钮也是primary类型，所以需要调整primary类型按钮的样式，在App.vue文件(不带scoped的style标签里写入以下代码)：

.confirmButton-reset{ // background: #fff !important; // color: #606266 !important; font-size: 12px; // border-color: #DCDFE6;; }

在使用了confirm组件的地方，修改确定按钮按钮所使用的样式class:

this.$confirm('确定要删除？', '确认信息', { distinguishCancelAndClose: true, confirmButtonText: '确定', cancelButtonText: '取消', confirmButtonClass: 'confirmButton-reset' }) .then(() => {

如果想给所有的el-button设置统一样式，比如设置一样的字体大小，代码如下：

.el-button { margin-top:3px; font-size: 14px; }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。