element组件样式如何个性定制

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

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

 

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


右键检查数字输入组件

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

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

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


你可能感兴趣的:(element组件样式如何个性定制)