前端组件样式穿透修改

背景：

在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（例如.el-input__inner）或其他深层样式， 但是element-ui 并没有提供修改的接口。

这时，就是需要手动修改样式。

解决方法

使用样式穿透

实例：
代码：

<nut-tabbar unactive-color="#black" active-color="red" bottom v-model="activeTab" v-show="tabbarVisible" @tab-switch=    "tabSwitch">
<nut-tabbar-item v-for="item in tabItem" :key="item.key" :tab-title="$t(`tabbar.${item.key}`)" :icon="item.icon" />
</nut-tabbar>

样式：

tabbar的默认背景色为白色。 通过给nut-tabbar添加style属性是无法修改其样式的。
修改tabbar背景样式

<style scoped lang="scss">
  div ::v-deep .nut-tabbar {
      border-style: none !important ;
      background: #1a1a1a !important;
   }
 </style>

(说明：nut-tabbar组件在渲染后，对应的css类名为 nut-tabbar， 所以此处实际修改的是类nut-tabbar的样式)
Done !

参考文章：
https://www.cnblogs.com/xwwin/p/16825539.html