vue頁面的style應(yīng)用scoped屬性，為什么會(huì)影響第三方組件的樣式覆蓋？

問題描述

我知道vue中style的scoped屬性又是需要慎用，但僅僅是在我編寫組件的時(shí)候吧？是為了方便其他人進(jìn)行覆蓋樣式。是不是這樣？

我現(xiàn)在是在自己項(xiàng)目中應(yīng)用第三方組件，所以我項(xiàng)目中寫scoped是不是沒關(guān)系啊？

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

環(huán)境：項(xiàng)目應(yīng)用的是vue的iview框架。下面是問題截圖，最下面有完整的demo。

這個(gè)是有scoped時(shí)的有問題的樣式。

下面這個(gè)是去掉scoped時(shí)的預(yù)期樣式。

相關(guān)代碼

<template>
  <Layout class="demo"
          style="background: #e3e8ee;padding:16px;">
    <Tabs type="card">
      <TabPane label="標(biāo)簽一">
        <router-link to="/home">
          標(biāo)簽一的內(nèi)容
        </router-link>
      </TabPane>
      <TabPane label="標(biāo)簽二">標(biāo)簽二的內(nèi)容</TabPane>
      <TabPane label="標(biāo)簽三">標(biāo)簽三的內(nèi)容</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>

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

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

我很疑惑這個(gè)問題，嘗試了半天才發(fā)現(xiàn)是scoped的問題，之前以為是iview的bug，汗。