深圳安嘉建设有限公司网站外贸招聘网站

vue 中 - 外部组件样式修改

在vue 中 当我们引入外部组件时， 常常会应该组件默认样式不符合自己的页面而烦恼？ 在本提供一个解决方法。

问题：

如： https://element.eleme.cn/#/zh-CN/component/tabs 中的组件

想改变标记部分样式，在代码中：

<style scoped>
:deep(.el-tabs__new-tab) {float: right;border: 1px solid #d3dce6;height: 30px;width: 30px;line-height: 30px;margin: 3px 10px;border-radius: 3px;text-align: center;font-size: 20px;color: #c7c7c7;cursor: pointer;transition: all .15s;
}:deep(.el-tabs__nav-prev) {left: 5px;
}
</style>

只需要使用 :deep(class or id) 就行