在做项目的时候,习惯性的在style标签上添加scoped属性。scoped属性是为了让组件样式私有化,让当前组件的样式不影响到其他组件。如果在style标签添加scoped属性后,再在该组件中直接修改样式是不会生效的。尝试过的解决方式有:
方式一:移除掉style标签上的scoped属性,存在的问题:可能会造成全局样式被污染
方式二:在组件中再写一个不带scoped属性的style标签。同一个组件中可以存在多个style标签
方式三:使用vue提供了深度选择器,在有scoped属性的style标签中也可以使用
/* 格式一:使用:deep(选择器类型) */
:deep(.el-table tr.el-table__row){
cursor: pointer;
}
/* 格式二 ::v-deep 这种格式会出现警告,提示让使用格式一 */
::v-deep .el-table tr.el-table__row {
cursor: pointer;
}
使用>>>和/deep/也会出现警告,提示让用:deep()代替,所以为了安全起见,建议首先格式一
[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.