关于ele框架样式修改

很多情况下，我们需要修改 ele 的原生样式，今天我碰到一个例子，修改的时候始终不成功，最后把样式代码换了个地方，写到顶层就生效了，这是因为，虽然我们的代码是在顶层类名下的，但是还是需要区分一下，浏览器上的节点是不是在顶层节点下

例如：我需要实现这样一个效果

这里用的是 ele 的 Popover 弹出框。lebel 的文字样式，input 框的大小都是需要修改的，我的 html 代码是这样的

虽然我的弹出框看起来是属于顶层类名下，按理来说，是可以在顶层类名下通过 /deep/ 穿透直接修改的，而我最开始也是这么做的，虽然样式写了，也使用了deep穿透，但是就是没有生效

<style lang="less" scoped>
.userManag {
  border-radius: 2px;
  background: #fff;
  padding: 12px 20px;
  min-height: 650px;
  .rys-top {
    /deep/.el-input-group__append,
    /deep/.el-input-group__prepend {
      padding: 0 10px;
    }
    
    // 子级
    /deep/.el-popover {
      .filter-form {
        /deep/.el-form-item {
          margin-bottom: 12px;
          margin-right: 35px;
          .el-form-item__label {
            color: #666666;
            font-size: 12px;
          }
          .el-form-item__content {
            .el-input--mini {
              width: 172px;
            }
          }
        }
      }
    }
  }
  /deep/ .el-form-item__label {
    font-size: 12px;
  }
}
</style>

然后我去浏览器看Dom节点，发现弹窗触发的时候，不是在顶层类名下的，而是直接在 body 下面，如图

然后我去更改了样式的层级，与顶层类名同级之后，样式就立即生效了

<style lang="less" scoped>
.userManag {
  border-radius: 2px;
  background: #fff;
  padding: 12px 20px;
  min-height: 650px;
  .rys-top {
    /deep/.el-input-group__append,
    /deep/.el-input-group__prepend {
      padding: 0 10px;
    }
  }
}

// 同级
.filter-form {
  /deep/.el-form-item {
    margin-bottom: 12px;
    margin-right: 35px;
    /deep/.el-form-item__label {
      color: #666666;
      font-size: 12px;
    }
    /deep/.el-form-item__content {
      /deep/.el-input--mini {
        width: 172px;
      }
    }
  }
}
</style>