美文网首页
vue 样式穿透

vue 样式穿透

作者: 苍老师的眼泪 | 来源:发表于2022-08-11 10:49 被阅读0次

    在如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,但由于scoped属性的样式隔离,可能需要去除scoped或是另起一个style。这些做法都会带来副作用(组件样式污染、不够优雅),样式穿透在css预处理器中使用才生效。

    less使用 /deep/
    .content /deep/ .el-button {
    height: 60px;
    }

    scss使用::v-deep
    .content ::v-deep .el-button {
    height: 60px;
    }

    scss使用/deep/
    .xsz_image_url /deep/ img {
    padding-top: 14px;
    width: 160px;
    border-radius: 5px;
    }

    scss使用:deep()

    detect_args :deep(.el-select .el-input.is-focus .el-input__inner) {

    border-color: coral !important;
    }

    stylus使用>>>
    外层 >>> .custon-components{
    height: 60px;
    }

    相关文章

      网友评论

          本文标题:vue 样式穿透

          本文链接:https://www.haomeiwen.com/subject/fdpxgrtx.html