vue中单个页面修改element UI样式

<template>
  <div class="wrap wx_login_el">
    <el-input v-model="loginForm.password" type="password" auto-complete="off"
                          @keyup.enter.native="handleLogin" :disabled="isLogin" placeholder="请输入密码" show-password
                ></el-input>
  </div>
</template>

<script>

</script>

<style scoped>
// 正常的样式放在里面
</style>


<style lang="scss">
// 修改element UI的样式放在这里面
/*element inpt只显示下划线*/
.wx_login_el .el-input__inner {
  width: 100%;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;

  /*outline: medium;*/
}
</style>

这是一个vue文件，正常的style放在第一个style里面，记得加上scoped作用域，不然本地开发可能没有问题，部署到服务器上面样式出现问题。

修改后的style放在下面，记得多加一层作用域