element组件样式如何个性定制

可以根据css增量更新的特性，对element组件样式进行个性定制

比如我们要对数字输入组件el-input-number的样式进行调整

 <div class="shop-list">
     <el-input-number
         v-model="num"
         class="input-number"
         :min="1"
         size="small"
     ></el-input-number>
 </div>

可以【右键检查】该组件，找到该组件在dom中的class属性

右键检查数字输入组件

可以看到该组件的class属性为input-number el-input-number el-input-number--small，右侧styles中为各个class中的属性值，这里我们发现el-input-number 属性中具有width值，下面对其进行增量覆盖。

在组件下方新建一个style，注意不要添加scoped属性，改属性会限制style样式仅限于当前作用域，无法对element组件进行增量覆盖。

由于无scoped属性，更新时最好将外层容器和组件本身都定义出有意义的class，这样会避免全局变量污染

<style lang="less">
.shop-list {
    .input-number {
        .el-input-number {
            width: 13rem;
        }
     }
  }
</style>