vue3使用深度选择器修改样式


前言

解决警告:[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

vue3已弃用以往的深度选择器

  • 警告: the >>> and /deep/ combinators have been deprecated. Use :deep() instead. 翻译过来就是 “>>>和/deep/已经被弃用。使用方法:deep()。”
  • 虽然以往的>>>和/deep/依然可以使用,但是会出现警告语句提示
  • 要是不想看到警告的话可以使用 “:deep()” 即可

例子:

/deep/ .el-button.is-round {
    padding: 4px 20px;
    background-color: #109cf1;
}

/*改为如下书写方式即可 */
:deep(.el-button.is-round) {
    padding: 4px 20px;
    background-color: #109cf1;
}

当有并集选择器,直接把类名放入 :deep() 括号中是不太对的:

/*如下修改只能改到第一个类名,修改不到第二个类名 */
:deep(.el-input__inner,
.el-button.is-round) {
    width: 440px;
    height: 60px;
    line-height: 20px;
    border-radius: 30px;
    border: 1px solid rgba(211, 211, 211, 100);
    font-size: 16px;
}

/*应改为 */
:deep(.el-input__inner),
:deep(.el-button.is-round) {
    width: 440px;
    height: 60px;
    line-height: 20px;
    border-radius: 30px;
    border: 1px solid rgba(211, 211, 211, 100);
    font-size: 16px;
}

提示:文章到此结束,文章仅为个人学习记录,若有不足还请大家指出。

Logo

前往低代码交流专区

更多推荐