怎么调整Element-ui组件样式，调到崩溃！！！

你是否也在苦恼于调整Element-ui组件的样式，最近在实习做项目的过程中调element-ui样式调到崩溃，含泪总结一下几点。避免踩坑！！！

1.全局样式

对于相同ui风格的Element-ui常用组件，我们可以使用全局样式来统一设置。

使用方法：

在src/styles目录下新建一个.css或.scss文件用来设置全局样式

比如设置按钮、弹窗样式等等

这里使用scss语法为例，因为可以设置变量更加方便

css 复制代码

//设置primary按钮颜色样式
//不同页面按钮颜色与字体大小一般相同我们可以进行统一设置
$primary-btn-color:#0074DB;
.el-button--primary{
	background-color: $primary-btn-color;
  border-color: $primary-btn-color;
  font-size: 16px;
}


//设置el-dialog弹出位置
//这里实现了el-dialog弹窗居中展示，并且动态控制了宽高
.el-dialog {
    margin: 0 ;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 12px;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
  }

更多element-ui组件的类名，可以通过f12进行元素检查来查找，一般为就是组件名el-button,el-input,el-dialog等等

2.class+::v-deep方法

这种方法一般用于想在页面中再对某个组件的样式进行单独调整（特别订制）

使用方法：

第一步：给你想要定制的el组件加一个类名或者给其父级元素设置类名

第二步：在style（加了scoped）标签中配合使用::v-deep进行样式定制

下面是代码演示

首先是给el组件添加类名

html 复制代码

<el-dialog title="企业信息" :visible.sync="dialogVisible" class="shenpi-dialog" center>
  <el-form label-width="70px" class="form-container" label-position="left">
    <el-form-item label="企业名称">
      <el-input placeholder="请输入企业名称"></el-input>
    </el-form-item>
  </el-form>
</el-dialog>

<style scoped="scoped" lang="scss">
  ::v-deep{
    /* 这里通过.shenpi-dialog.el-dialog精确筛选到同时具有这两个类名的元素，
    通过v-deep样式穿透修改了el-dialog子组件的样式 */
    .shenpi-dialog.el-dialog {
      width: 968px;
      height: 780px;
    }
  }
</style>

还可以通过给父组件设置class类

注意：使用这种方法时要注意确保父级元素中只有你想要定制的那一个el-dialog组件，否则父级元素中其他的el-dialog也会被修改，除非其他el-dialog也需要同样的样式

html 复制代码

<div position="relative" class="shenpi-dialog">
  <el-dialog title="企业信息" :visible.sync="dialogVisible" class="shenpi-dialog" center>
    <el-form label-width="70px" class="form-container" label-position="left">
      <el-form-item label="企业名称">
        <el-input placeholder="请输入企业名称"></el-input>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
<style scoped="scoped" lang="scss">
  ::v-deep{
    /* 筛选到shenpi-dialog属性下的el-dialog子元素 */
    .shenpi-dialog .el-dialog {
      width: 968px;
      height: 780px;
    }
  }
</style>

解释一下为什么要使用::v-deep？

Vue 的 <style scoped> 会让样式仅作用于当前组件，避免污染全局样式。它的实现原理是：

自动给当前组件的元素添加一个 data-v-xxxxx 属性（如 <div data-v-f3f3eg9>）。
CSS 选择器会被编译成带属性的形式（如 .el-input[data-v-f3f3eg9]）。

但这样会导致一个问题：

如果你在组件内想修改子组件（如 Element UI 的 el-dialog）的样式，由于子组件的 DOM 节点不在当前组件的 data-v-xxxxx 作用域内，普通样式会失效！

::v-deep 可以跳过 Vue 的 Scoped CSS 限制，直接穿透到子组件的内部元素。

什么时候用？

修改子组件的根元素样式（如 el-dialog）
修改子组件内部的深层元素（如 el-dialog__header）

这里复习一下css语法

.shenpi-dialog.el-dialog中间没空格表示同时拥有这两个类名的元素

等同于<element class="shenpi-dialog el-dialog"> </element>

.shenpi-dialog .el-dialog 中间有空格表示父子级元素

等同于

html 复制代码

<element class="shenpi-dialog">
  <element class="el-dialog"> 
  </element>
</element>
<!-- 选中子级元素 -->

.shenpi-dialog, .el-dialog中间带逗号的表示逻辑或，有其中一个类名就会被选中。

3.使用官方提供的参数

这里以el-form组件为例

inline 行内表单模式 boolean
label-position 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
label-width 表单域标签的宽度，如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto
size 用于控制该表单内组件的尺寸 medium / small / mini

el-form-item同样具有2，3，4参数，若不设置则继承el-form的样式，若设置则覆盖

html 复制代码

<el-form :inline=true label-width="80px" label-position="left" size="mini">
  <el-form-item label="活动名称" label-width="100px">
    <el-input placeholder="请输入" ></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select  placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>

更多组件的样式调整参数，可以查阅官网文档。

注意：不建议给element组件设置内联style样式，不是每个组件都会生效，试了几次感觉很多都不生效

以上是最近调整element-ui组件样式总结的一些心得，个人认为通过全局样式并结合class+::v-deep的方式调整样式，可以使团队沟通成本最低，全局样式单独维护，因为有scoped,个人负责的页面可以随意修改。

有不对或者不足的地方，请大家多多指教啊！