vue3使用深度选择器修改样式
vue3深度选择器的使用、解决警告:[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
·
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;
}
提示:文章到此结束,文章仅为个人学习记录,若有不足还请大家指出。
更多推荐
已为社区贡献9条内容
所有评论(0)