解决element-ui修改原生的样式污染全局的样式

方法一：把样式css写在没有scoped属性的style标签中，部分组件的样式需要用到!important使其样式权重最高
缺点：会影响全局的样式。
优点：某些共同的样式不需要进行重复书写。

现在页面有2个组件，可以进行点击切换，且2个组件有同样的element-ui组件。现在想对Home的输入框设置蓝色，about组件的设置为红色。
如图home组件的样式书写：

about组件的样式书写：

最后的结果是2个组件的样式都是蓝色。显然不是想要的结果。

解决办法：利用方法二
方法二：样式穿透 >>>
找到需要修改的标签的父元素，然后 父元素 >>> 需要修改的元素{CSS样式}.
优点：不会造成样式全局污染。
书写方法如图：