vue页面的style应用scoped属性，为什么会影响第三方组件的样式覆盖？

Question

问题描述

我知道vue中style的scoped属性又是需要慎用，但仅仅是在我编写组件的时候吧？是为了方便其他人进行覆盖样式。是不是这样？

我现在是在自己项目中应用第三方组件，所以我项目中写scoped是不是没关系啊？

问题出现的环境背景及自己尝试过哪些方法

环境：项目应用的是vue的iview框架。下面是问题截图，最下面有完整的demo。

这个是有scoped时的有问题的样式。

下面这个是去掉scoped时的预期样式。

相关代码

<template>
  <Layout class="demo"
          style="background: #e3e8ee;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: #fff;
  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: #fff;
}
</style>
<script>
export default {

}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

有大佬明白么？这是什么原因啊~

我很疑惑这个问题，尝试了半天才发现是scoped的问题，之前以为是iview的bug，汗。

Answer 1

vue的scope就是一个作用域的意思，你用less，通过嵌套可以达到不污染样式空间，不影响其他元素样式的目的。加了scope之后，作用也是一样的，就是这个css只在你定义的这个component内部生效。