elementUi 樣式無法更新

elementUI 樣式無非更新

在vue-cli裏編寫開發

• 背景
  在操作過程中，會發現elementUI內置的樣式無法滿足需求，但是無論怎麼加樣式，他都不會生效，例如el-tabs__content

• 問題定位

<style lang="scss" scoped>  
    <!-- 可以看到scoped參數，表示如何和父類發生了衝突，他不會被應用 -->
</style>
<!-- 也就意味着，如果我們想使用自己的樣式，就要去掉這個參數 -->

• 解決方法

<!-- 去掉scoped參數，然後將原本的el-tabs__content樣式拷貝下來，然後添加自己的樣式 -->
<style lang="scss">
  .el-tabs__content{
    overflow: hidden;
    position: relative;
    height: calc(100% - 40px);
  }
</style>