深度选择器-样式穿透

以前在项目开发中,如果使用了第三方UI库,要覆盖样式,通常使用>>>深度选择器来进行样式穿透

比如:


但是如果项目中使用scss,less等预处理器却无法解析>>>,所以我们使用下面的方式


如果是vue项目,vue-loader自己出了一个::v-deep,用来做样式穿透,而且::v-deep更保险并且编译速度更快


今天写一个vue3的项目,改了一个element 的一个样式还是用原来的/deep/编译的时候发现报了如下的警告
在这里插入图片描述
竟然说>>>和/deep/ 已经被弃用了,这变化是真的快啊,虽然样式仍然生效,但是编译报警告这也太难受了,当然了改成:deep()就没问题了

    .inp {
        width: 350px;
        :deep(.el-input__inner) {
            height: 40px;
            background-color: var(--boxBackgroundColor);
            color: var(--whiteColor);
            border-color: var(--borderColor);
        }

        :deep(.el-input__inner):focus {
            border-color: var(--borderColor);
        }
    }

你可能感兴趣的:(前端,css)