The scoped property is new in HTML5.

When the style tag has the scoped property, its CSS styles can only be applied to the current Vue component, so that the styles of components do not contaminate each other.

If all of the style tags in a project are scoped, you are modularizing the styles.

1, full page coverage

Don’t addscoped

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

2. Single-page style overlay

1. Namespace

<Cell class="cellSty" title="Cell Style Override" />
Copy the code
<style lang="less">
    .cellSty {
        .hp-cell-content .ivu-tabs-content {
            height: calc(100vh - 6.5 rem - 60px); }}</style>
Copy the code

2, through the

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

Summary: If you use a custom class name, you do not need to add scoped. If you use the penetrating mode, you need to add it.