北京网站优化经理深圳营销型网站

scoped 属性是 HTML5 中的新属性。

当style标签拥有scoped属性时，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。

如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

1、全页面覆盖

不添加scoped

<style lang="less" >/deep/.hp-cell-content .ivu-tabs-content {height: calc(100vh - 6.5rem - 60px);}
</style>

2、单页面样式覆盖

1、命名空间

<Cell class="cellSty" title="单元格样式覆盖" />

<style lang="less">.cellSty {.hp-cell-content .ivu-tabs-content {height: calc(100vh - 6.5rem - 60px);}}
</style>

2、穿透

<Cell  title="单元格样式覆盖" />

<style lang="less" scoped>/deep/.hp-cell-content .ivu-tabs-content {height: calc(100vh - 6.5rem - 60px);}
</style>

总结：单页面覆盖iview样式时，若采用自定义类名，不用添加scoped，使用穿透方式需要添加。