css技巧

一、覆盖样式

场景：不修改第三方组件源码的情况下，覆盖其内部的部分样式。

<el-collapse v-model="collapseActiveNames" class="my-collapse">
    <el-collapse-item name="table">
        <!--   展示内容     -->
    </el-collapse-item>
</el-collapse>

<style lang="scss" scoped>
.my-collapse ::v-deep .el-collapse-item__header {
  height: 100px;
}
</style>

• 上述代码可以将拥有my-collapse属性的组件中的子组件中，用到的名为el-collapse-item__header的class的height属性覆盖为100px
• ::v-deep可在css和scss中使用
• 在css中还可以使用/deep/替代::deep，但/deep/不能在scss中使用