相信大家在写vue项目的时候大多都会用到element组件，这样修改组件自带默认样式也就成了前端工程师的主要任务之一了，这篇文章就怎样修改element中的默认ui样式进行说明

• 以input输入框为例
  无论要修改哪种样式，都要先熟知或查看element自带的修改样式方式，如果element本身就自带了修改样式的属性，直接用即可，大部分标签也支持利用class命名更改标签样式，本文主要对没有提供更改样式属性的标签进行修改

<el-input v-model="input" placeholder="请输入内容" class="myInput"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

<style scoped>
.myInput {
  width: 300px;
  height: 50px;
  margin: 50px 100px;
}
</style>

1、通过class更改通用样式

• 这样设置后发现通过class更改的高度没有起作用
  这时候打开控制台看到是这样的结构
  
• 我们加的样式被放到外层的div里了同el-input类名同级，真正起高度作用的是el-input__inner
  所以我们就有了结论：只要更改el-input__inner的高度值就可以了
• 说明： el-input__inner类名直接写到style里是不起作用的，因为此style为组件私有style，伴有scope唯一性，而原本样式是直接注册到全局的，故可以这样写：

2、通过全局样式标签修改

可以将

.el-input__inner {
  height: 50px;
}

直接写到公共样式里即可以更改，但是这样会导致全局的input框都会变成此样式的，显然这不是我们要的结果，你可以这样写：

<style scoped>
.myInput {
  width: 300px;
  height: 50px;
  margin: 50px 100px;
}
</style>
<style>
.outCompoment .el-input__inner {
  height: 50px;
}
</style>

• .outCompoment即为组件最外层样式，保证每个组件最外层样式的唯一性，就可以解决此问题
  但是这样写不仅不美观，而且也不能保证每一个组件最外层样式不出错出现重复的现象，下面看第三种方法：

3、通过deep深度修改标签样式

<style scoped>
.myInput {
  width: 300px;
  height: 50px;
  margin: 50px 100px;
}
.outCompoment /deep/ .el-input__inner {
  height: 50px;
}
</style>

这样就会被编译成

也就实现了输入框高度的更改，这样改不仅美观，也不会出现之前的样式冲突问题

总结

element里面的样式都可以用第三种方法去更改，不推荐第一二种，保证不了样式的唯一性，很容易出现全局样式污染的情况，大家还有什么好的方式，欢迎补充修正~