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) 就行