problem description

I know that the scoped attribute of style in vue needs to be used carefully again, but only when I"m writing components, right? It is to make it easier for others to override the style. Is that right?

I am now using third-party components in my own project, so is it okay to write scoped in my project?

the environmental background of the problems and what methods you have tried

Environment: the project uses vue"s iview framework. Below is a screenshot of the problem, with a complete demo at the bottom.

this is the problematic style with scoped.

scoped

related codes

<template>
  <Layout class="demo"
          style="background: -sharpe3e8ee;padding:16px;">
    <Tabs type="card">
      <TabPane label="">
        <router-link to="/home">
          
        </router-link>
      </TabPane>
      <TabPane label=""></TabPane>
      <TabPane label=""></TabPane>
    </Tabs>
  </Layout>
</template>
<style scoped lang="less">
.demo > .ivu-tabs-card > .ivu-tabs-content {
  height: 120px;
  margin-top: -16px; // scoped margin
}

.demo > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
  background: -sharpfff;
  padding: 16px;
}

.demo > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
  border-color: transparent;
}

.demo > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
  border-color: -sharpfff;
}
</style>
<script>
export default {

}
</script>

what result do you expect? What is the error message actually seen?

there are bosses, do you understand? What is the reason for this?

I was confused about this problem. I tried for a long time to find out that it was scoped. I thought it was bug, Khan of iview.