The reason for the project is that xhcj component is needed in the parent list component of the sub component, and xhcj component is also used in the sub component. The code logic of the two places is the same, only the style is slightly different, so it is decided to share the component, and then overwrite the style.

The scoped attribute on the style tag will cause the style to only work on the current component and not on the child component. But without scoped, the xhcj introduced by the parent and the xhcj style referenced here will change, so it is not allowed.

This is the first version written in sub I wrote two style Label, the part to be covered is not added. scoped Property, also achieve the effect I need, but write two style The label still doesn't fit.

<style scoped lang='scss'>
   ...
</style>
<style lang="scss">
//. subscribe the style of sub component is to override the style of xhcj component below this component.  
  .subscribe .xhjj{
    border: none;
    position: static;
    background: transparent;
    width: auto;
    height: auto;
    .sbottom{
      height: auto;
      overflow: inherit;
      overflow-x: inherit;
      .treeFirst{
        border: none;
        background: transparent;
      }
      .flex-w-wrap{
        background-color: transparent!important;
        .treethird{
          width: 25%;
        }
      }
    }
  }

</style>

Then changed to the following version

<style scoped lang="scss">
  ...... 
  .subscribe /deep/ .xhjj{
    border: none;
    position: static;
    background: transparent;
    width: auto;
    height: auto;
    .sbottom{
      height: auto;
      overflow: inherit;
      overflow-x: inherit;
      .treeFirst{
        border: none;
        background: transparent;
      }
      .flex-w-wrap{
        background-color: transparent!important;
        .treethird{
          width: 25%;
        }
      }
    }
  }

</style>

The focus has been marked in red. With the scoped attribute, two style tags are no longer used.

However, with / deep / you can select sub components in depth, which is not limited to styles that are only valid for the current component.

/Deep / can be replaced by > > > but some of the pre compilers may not parse properly, so / deep / can be used instead, with the same effect.