三大样式穿透
Posted 易函123
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三大样式穿透相关的知识,希望对你有一定的参考价值。
问题
用到很多vue常用的组件库(element, vant, vuetify),虽然配好了样式但是还是需要更改其他的样式
解决
三大样式穿透 >>> , ::v-deep , /deep/
在style经常用scoped属性实现组件的私有化,所以才需要样式穿透
需要注意:
- ( >>> 只作用于css
- ::v-deep 只作用于sass
- /deep/ 只作用于less
示例:
1
<style lang="scss" scoped>
.conBox ::v-deep .el-input__inner{
padding:0 10px;
}
</style>
2
<style lang="less" scoped>
.conBox /deep/ .el-input__inner{
padding:0 10px;
}
</style>
3
<style>
.num-input {
width: 90px;
margin-top: 15px;
>>> .ivu-input {
text-align: center!important;
}
}
</style>
三大样式穿透
以上是关于三大样式穿透的主要内容,如果未能解决你的问题,请参考以下文章