背景:
在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