Thank you for inviting ~

<el-input
  class="input-class"
  placeholder=""
  v-model="input1"
  :disabled="true">
</el-input>

.input-class{
    width: 500px;
    height: 40px;
}

this is fine.
/ / about date-picker, you can append styles according to the style name of the rendering process

<div class="block">
    <span class="demonstration"></span>
    <el-date-picker class="input-class" v-model="value1" type="date" placeholder="">
    </el-date-picker>
</div>

.input-class{
  .el-input__inner{
    width: 50px; 
  }  
}

webpack the style of scoped is lost after packaging. There are two options. 1. Do not use scoped for individual styles. 2. Use / deep/ .

// inputstyle
<style lang="less">
 .input-class{
  .el-input__inner{
    width: 50px; 
  }  
}
</style>
<style lang="less" scoped>
.other{}
</style>

or use the depth selector / deep/ . check the official document

Thank you for the invitation. Element-ui can also set class to disassociate css
this is a project el-input

how did you solve it in the end?

add style= "width:217px" to the tag