前言: 在使用ElementUI中免不了要根据自身需求修改EleUI的默认样式;

<div class="form-box">
    <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input>
    <el-input v-model="form.password" placeholder="请输入密码"  prefix-icon="el-icon-lock" type="password"></el-input>
    <el-input v-model="password" placeholder="请输入验证码"></el-input>
    <el-button type="primary" round @click="loginClick()">登录</el-button>
  </div>

例如,我需要将EleUI中表格的默认样式修改为无上左右边框的样式
默认样式:

需要修改的样式:

首先,找到需要修改的默认样式类,例如我要修改input的样式,可以看到EleUI控制input的类选择器名称为el-input__inner,然后对其中样式进行定制修改.

1. 方法一: 使用/deep/深度选择器

<style lang="less" scoped>
/deep/.el-input__inner {
  border-width: 0 0 2px 0;
} 
</style>

2. 方法二: 使用>>>深度选择器

<style scoped>
.form-box >>> .el-input__inner {
  border-width: 0 0 2px 0;
}
</style>

值得注意的是:
① 使用>>> ,如果是 less/sass 是无法识别的,此时需要使用 /deep/