css样式穿透（深度选择器）

1、什么情况下使用样式穿透引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除2、样式穿透的三种办法1. >>>适用与 css、stylus，不太推荐，可能会有问题外层类/deep/ 想要修改类名 {修改样式}2. /deep/适用于 scss、le

仙说

31167人浏览 · 2022-05-23 11:44:23

仙说 · 2022-05-23 11:44:23 发布

1、什么情况下使用样式穿透

引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式
样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除

2、样式穿透的三种办法

1. >>>

适用与 css、stylus，不太推荐，可能会有问题
外层类 /deep/ 想要修改类名 {
修改样式
}

2. /deep/

适用于 scss、less
外层类 >>> 想要修改类名 {
修改样式
}

3. ::v-deep

通用，据说可以加快编译速度
::deep 想要修改类名 {
修改样式
}

使用样式穿透还是无效

有时会发现使用了以上方法修改 element 组件样式还是会不生效，
首先打开浏览器控制台的 elements 里面的页面代码，你会发现
在这里插入图片描述
el-popper 是在页面的根文件下，而非组件中
这些组件有：

 <el-popconfirm>  <el-date-picker>  <el-popover>

在这里插入图片描述
页面代码：

                    <el-popconfirm
                      popper-class="popperStyle2"
                      :icon="Warning"
                      icon-color="#4C9FFF"
                      title="确认删除？"
                      @confirm="delPerson(scope.row.id)"
                    >

样式代码：

<style lang="scss" scope>
// el-popover
.popperStyle1 {
  &.el-popper.is-light {
    background: $bg-color;
    border: $input-border;
  }
  &.el-popper[data-popper-placement^=right] .el-popper__arrow::before {
    border: $input-border;
    background: $bg-color;
  }
}
</style>

查看页面效果还是没有生效，去掉 scoped

最终写法是这样, .el-popover.my-popover 这种格式，前缀是.el-popover ，不然不生效。且不能加上scoped