前言
其实只是一个警告，如果你不在意也是可以的，不过有点强迫症就按着提示说的改了，然后又去官网看了下对应的文档；
!> ::v-deep usage as a combinator has been deprecated. Use :deep() instead.
这里没啥好说的，因为Vue3的文档中有对应的解释组件作用域CSS了，而且就算不看文档根据提示我们也可以知道正确的写法;
内容
以前写法
.form { width: 520px; max-width: 100%; padding: 0 24px; box-sizing: border-box; margin: 160px auto 0; :deep { .el-input__wrapper { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; background: rgba(0, 0, 0, 0.1); } .el-input-group--append > .el-input__wrapper { border-top-right-radius: 0; border-bottom-right-radius: 0; } .el-input-group--prepend > .el-input__wrapper { border-top-left-radius: 0; border-bottom-left-radius: 0; } } }
vue3
.form { width: 520px; max-width: 100%; padding: 0 24px; box-sizing: border-box; margin: 160px auto 0; :deep(.el-input__wrapper) { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; background: rgba(0, 0, 0, 0.1); } :deep(.el-input-group--append > .el-input__wrapper) { border-top-right-radius: 0; border-bottom-right-radius: 0; } :deep(.el-input-group--prepend > .el-input__wrapper) { border-top-left-radius: 0; border-bottom-left-radius: 0; } }
学无止境,谦卑而行.
