scopedAttributes are new attributes in HTML5.When the style tag has the scoped attribute, its css style can only be used for the current Vue component, so that the styles of the components will not pollute each other.
If all style tags of a project are added with the scoped attribute, it is equivalent to realizing the modularization of styles.
1. Full page coverage
no addedscoped
<style lang="less" >
/deep/.hp-cell-content .ivu-tabs-content {
height: calc(100vh - 6.5rem - 60px);
}
</style>
2. Single page style coverage
1. Namespace
<Cell class="cellSty" title="单元格样式覆盖" />
<style lang="less">
.cellSty {
.hp-cell-content .ivu-tabs-content {
height: calc(100vh - 6.5rem - 60px);
}
}
</style>
2. Penetration
<Cell title="单元格样式覆盖" />
<style lang="less" scoped>
/deep/.hp-cell-content .ivu-tabs-content {
height: calc(100vh - 6.5rem - 60px);
}
</style>
Summary: When a single page covers the iview style, if you use a custom class name, you don’t need to add it
scoped, but you need to add it when you use the penetration method.