vue 中 - 外部组件样式修改

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