[ElementUI] 修改ElementUI默认样式

前言:在使用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,然后对其中样式进行定制修改.

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

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

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

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

值得注意的是:

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