如何更改Elementui组件样式

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

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

首先，我们在浏览器用F12打开开发者模式，并点击此功能后点击我们想要更改的样式标签

 

 我们可以看到在标签上显示的一些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;
}

完成后样式为

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

注意，此样式修改会作用于全局，如果加了scoped就只会作用于本组件以及子组件样式。