使用 scoped 后,父组件的样式将不会渗透到子组件中。
例如(无效):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <template>
<div id="app">
<el-input class="text-box" v-model="text"></el-input>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
text: 'hello'
};
}
};
</script>
<style lang="less" scoped>
.text-box {
input {
width: 166px;
text-align: center;
}
}
</style> |
解决方法:
使用深度作用选择器 /deep/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <template>
<div id="app">
<el-input v-model="text" class="text-box"></el-input>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
text: 'hello'
};
}
};
</script>
<style lang="less" scoped>
.text-box {
/deep/ input {
width: 166px;
text-align: center;
}
}
</style> |
简便方式
1 2 3 4
| <style scoped>
.a >>> .b { /* ... */ }
</style>
//对于scss这类的预处理器需要用上面/deep/的写法,此方法无法正常编译解析 |
以上将编译成:
1
| .a[data-v-f3f3eg9] .b { /* ... */ } |
官方文档:https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"Vue scoped CSS 与深度作用选择器 deep"
最新评论