1.vue scoped 深度作用选择器

希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,可以使用 >>> 操作符:

.userInfo >>> .el-form-item__label
        font-size: $font-size-medium
        color: $color-mainFont
        font-weight: 500
        margin-bottom: 20px
        padding: 0

sass和less无法正确解析>>>,可以使用/deep/ 替换,同样可以有作用

<style lang="less" scoped>
.searchforminline-out {
/deep/ input{
width: 50px;
}
</style>

2.不太推荐的一种方法

定义一个含有scoped属性的style标签之外,再定义一个不含有scoped属性的style标签(个人建议使用第一种方法)

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

 

Logo

前往低代码交流专区

更多推荐