Although the default style has been able to meet many needs when usingelement-ui, there are always some custom needs to be added sometimes. However, sometimes the style is written on it, which should be correct in theory, but it does not take effect.
In fact, when vueusing a third-party framework in a project, this problem may occur. The reason is vuethat it scopedcan be declared that the style is effective within the scope of the component. So as to avoid style pollution of different components, but most people write with scopedthem, so the style scopeddoes not take effect in the domain.
Solution:

1. Remove scoped

Directly <style lang="less" scoped>in scopedto remove it so that style to take effect, although simple and crude but it is not a good method.

2. Use deep action selectors

Used >>>as a deep-action selector in css

<style scoped>
 .box >>> .el-input {
   width: 60px;
 }
 </style>

Used /deep/as a deep-action selector in less

<style lang= "less" scoped>
 .avatar-uploader /deep/ .el-upload {
   border: 1px dashed #
   d9d9d9; border-radius: 6px;
   cursor: pointer;
 }
 </style>

3. Use global styles