How to customize the size of an el-date-picker in element ui

<el-date-picker
      v-model="value1"
      type="date"
      placeholder="">
    </el-date-picker>

the rendered input is not styled through the parent element + input tag

element is a common input box, most of which are default sizes. Now I want to adjust some of them to change the width, height and color. What should I do? The style is set directly after the parent element is added with class, because the dom does not have it, so the style is gone after the webpack is packaged. What should I do with it?

Element-ui vue.js webpack

Mar.22,2021

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

Previous: Phpstrom opens a file in the network and switches it to another program, then comes back and reloads it.

Next: The page loads all the data for the first time and clicks the current date to show the data ideas after Filter