vue elementui 部分样式无效的解决方法记录

vue elementui 部分样式无效的解决方法记录

问题如下：

<el-form-item class="btns">
          <el-button type="primary"
                     @click="login">登录</el-button>
          <el-button type="info"
                     @click="resetLoginForm">重置</el-button>
</el-form-item>

.btns{
  display: flex;
  justify-content: space-around;
  padding: 0;
}

实际效果并没有达到预期。

通过浏览器检查元素发现，我定义css底下还有一个div

所以只需要将代码改为

//这是vue-cli 3.0及以上的改发
.btns ::v-deep .el-form-item__content {
  display: flex;
  justify-content: space-around;
  padding: 0;
}
//这是低版本的改发
.btns /deep/ .el-form-item__content {
  display: flex;
  justify-content: space-around;
  padding: 0;
}

结果：