怎样优雅的更改element中的样式

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