需求改为红色
background-color: red;
}
1. 第一种
把上面的scoped去掉
优点: 修改简便
缺点: 把scoped去掉了，就变成全局css了，可能会影响其他组件
2. 第二种
就是去 node_modules裡面把 element-ui 整包 CSS 给抓出来，然后放到自己指定的路径！
这是 element-ui 的 CSS 在node_modules裡面的位置
// 原本的路径 (就不要用 node_modules 这包)
import ‘element-ui/lib/theme-chalk/index.css’;
// 自己抓下来后指定的路径 (改成自己抓下来这包)
import ‘./scss/theme-chalk/index.css’;
然后这样就可以去修改自己抓下来这包，就可以改 element-ui 的 CSS 了。
优点：可以不会去跟其他 class 互相影响到，还有不是透过覆盖，是透过直接修改，这样整包的主导权就会在自己手上！
缺点：要花点时间去看完整包CSS架构，还有就是说如果 element-ui 有升级的话，对于自己抓下来修改CSS的部分可能会有问题，所以这方面可能要评估一下。
3. 第三种
我个人觉得比较好得做法，不用把整个CSS包抓出改，也可以使用scoped的方式来写CSS，其实可以使用 深度作用选择器 来实作。
如果希望 scoped 样式中的一个选择器能够更深入权重，例如影响子组件，你可以使用 >>>加深操作权重。
这个代码会编译成
.a[data-v-f3f3eg9] .b { /* ... */ }
像 Sass 无法正确解析 >>>。这种情况下你可以使用 /deep/符号取代，这是>>>的别名，同样可以正常编译。
我们回来看看我完成修改的画面！
我的阶层是 .el-main > .el-input > .el-input__inner，所以我这样写
.el-input__inner 就是我最后要修改的 input，所以我最后使用了 /deep/去修改他的CSS样式，是不是很简单。
优点：可以不用一定要element-ui整包CSS抓出来放到自己的专案资料夹裡面去修改，还可以在vue的组件裡面使用scoped让你的CSS可以组件化，不要去改到原本element-ui的程式码，我个人比较喜欢这样的做法。
缺点： 这样就是透过覆盖的方式来去覆写 element-ui 的 CSS，效能的部分有待验证，不过比起把整包 CSS 抓出来修改还要去担心会不会因为升级或是改坏那包CSS的风险跟时间成本比起来，我觉得还好啦！
关于深度作用选择器的相关内容可以参考 vue-loader 的文件裡面就有提到。
