vue使用element UI饿了么改变组件宽高颜色等样式

在vue-cl中使用element ui库时用到了一个搜索框，但是官网中得input框api改变大小样式得只有一个size属性可选值只有三个：medium / small / mini 这样就不太符合我的具体样式要求了，需要把宽高改成我需要的值，从网上找到了两种办法：

一：

首先找到你input的class名el-input__inner，然后在style标签中写入你需要改的样式，


最后把style标签中的scoped属性删掉

<style scoped lang="scss">

删掉后确实可以通过具体class名改变样式，但是删掉scoped会污染全局样式，我有点强迫症不想删除它怎么办？

二：

这个办法可以不用删除scoped，直接上代码

 /deep/ .el-input__inner{
    background: yellow
  }

/deep/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，开始没太注意 ，以为是组件css的写法，后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存在着一个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。

例如我在一个商城的项目使用了mint-ui的radio组件，此时mint-ui已经有默认的样式了，我可以通过提取公共文件的方式来修改，以达到自己想要的，但是同时其他地方也会受到影响

与此同时我只想要修改这个地方的样式，在其他页面用到mint-ui的时候不变，我就可以用/deep/了