修改elementUI的默认样式

在做项目的时候,习惯性的在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.

猜你喜欢

转载自blog.csdn.net/m0_73334325/article/details/130342188
今日推荐