vue常见UI框架修改样式无效问题参考方案

vue常见UI框架修改样式无效问题

平时开发中遇到修改第三方UI框架样式不生效时我们通常会使用深度修改deep，但是下面这些情况修改失败了改如何解决呢？

例1：vue2中jeecg的ant design框架中当存在<template><div><a-modal>层级时，修改样式即使加了/deep/有时也会无效，解决办法是尝试去除template里的首层div

例2：vue3中element plus框架修改时如下所示：

// 简略代码
<template>
    <el-dialog
      :model-value="isShowDialog"
      title="选择回放视频"
      @close="modalClose"
      width="1000px"
    >
      <el-table
        :data="tableData"
        class="tableBox"
        @select="selectClick"
        @selection-change="handleSelectionChange"
        ref="taskTableRef"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="name" label="视频名称" width="300" />
        <el-table-column property="time" label="视频时长" width="200" />
        <el-table-column property="timeStar" label="直播开始时间" width="200" />
        <el-table-column property="id" label="场次ID" width="200" />
      </el-table>
    </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
  visibility: hidden;
}
</style>

上面案例中scss内容即使加了deep也不生效，解决方法是尝试在template里第一层加个div

结论：综上所述，当遇到加了deep还修改无效时，除了检查是否代码错误，还应当尝试修改template里div标签的使用

原文博客链接：xiaokar博客