Element UI如何自定义样式

简介

Element UI是一套非常完善的前端组件库，但是如何个性化定制其中的组件样式呢？今天我们就来聊一聊这个

举例

就拿最常见的按钮 el-button来举例，一般来说默认是蓝底白字。效果图如下

可是我们想个性化定制，让他成为粉底红字应该怎么办呢？

方法1

使用行内样式，直接设置el-button的样式

  <el-button color="pink" style="color: red">红字</el-button>

1. 优点：使用浏览器工具直接定位到影响样式的属性名或者类名，使用style直接修改，方便易懂
2. 缺点：只修改一俩个样式还行，大面积修改的话会让标签显的很乱。不美观

方法2

使用深度选择器，在style标签中修改样式,深度选择器有以下三中

1. >>>(适用于css样式)
2. /deep/（适用于less样式）
3. :deep()（适用于scss样式）

:deep(.el-button) {
  color: red;
}

效果图