前言:在使用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/