vue中style的scope屬性與三方組件樣式的修改

在vue項目中通常會給style標簽加上scope屬性，以此來實現樣式的私有化，避免全局污染。
但有的時候這個屬性又會帶來麻煩：當引入第三方組件且需要修改其樣式時，通常出現沒有修改成功的情況

一、scope實現私有化樣式的原理

通過給DOM元素結構上以及css樣式上添加一個不重復的標記，來保證其唯一性，以此達到樣式的私有化
1
例如：當使用第三方插件elementui的button、dialog組件，並在style標簽上加上scoped的屬性

<template>
  <div class="login-page">
    <h1>{{ msg }}</h1>
    <div>
      <el-button type="success" @click="login">登錄</el-button>
      <el-button type="success" @click="dialogVisible = true">彈框</el-button>
    </div>
    <el-input></el-input>
    <div>
      <el-dialog
        title="提示1111"
        :visible.sync="dialogVisible"
      >
        這是一個彈框
      </el-dialog>
    </div>
  </div>
</template>



<style lang="less" scoped>
  @import "../less/login.less";
</style>

login.less文件

.login-page{
  h1{
    cursor: pointer;
    background: #f00;
  }
  .el-button{
    width: 200px;
  }
  .el-input{
    width: 100px;
  }
  
  .el-dialog{
    width:200px;
    height: 300px;
    background: #ddd;
  }
}

在瀏覽器運行后的DOM顯示結果為：
1、el-button元素加上了data屬性，且其css也加上了data屬性選擇器
2、el-dialog組件元素只有最外層元素有data屬性，從第二層元素起就沒有，且雖然在login.less文件中改變其樣式，但是沒有效果

由此可以看出：
1、添加scoped屬性之后，DOM節點添加了一個不重復的data屬性來表示其唯一性
2、添加scoped屬性之后，DOM節點的css選擇器末尾添加了data屬性選擇器來私有化該元素的樣式
3、添加scoped屬性之后，會給組件的最外部添加data屬性，如果組件里面還有包含其他組件，那么其他組件是作用不到的
二、解決引入第三方組件並修改其樣式不生效的問題
1、解決方案一：因為vue文件中可以出現多個style，所以可以使用兩個style，一個style加上scoped屬性，一個style不加scoped屬性，
且將第三方組件中嵌套的元素樣式放置在不帶scoped的style元素內，這樣子第三方組件中的嵌套元素中樣式就可以生效了

<template>
  <div class="login-page">
    <h1>{{ msg }}</h1>
    <div>
      <el-button type="success" @click="login">登錄</el-button>
      <el-button type="success" @click="dialogVisible = true">彈框</el-button>
    </div>
    <el-input></el-input>
    <div>
      <el-dialog
        title="提示1111"
        :visible.sync="dialogVisible"
      >
        這是一個彈框
      </el-dialog>
    </div>
  </div>
</template>

<style lang="less" scoped>
  @import "../less/login.less";
</style>
<style lang="less">
   .el-dialog{//將第三方組件中嵌套的元素樣式放置在不帶scoped的style元素內，這樣子第三方組件中的嵌套元素中樣式就可以生效了
      width:200px;
      height: 300px;
      background: #ddd;
    }
</style>

login.less文件

.login-page{
  h1{
    cursor: pointer;
    background: #f00;
  }
  .el-button{
    width: 200px;
  }
  .el-input{
    width: 100px;
  }
}

2、解決方案二：使用深度選擇器： <<< 或者 /deep/

穿透性的改變第三方組件的樣式需要加上deep,如果是stylus使用 >>> ,如果是less 或者sass就使用 /deep/

<template>
  <div class="login-page">
    <h1>{{ msg }}</h1>
    <div>
      <el-button type="success" @click="login">登錄</el-button>
      <el-button type="success" @click="dialogVisible = true">彈框</el-button>
    </div>
    <el-input></el-input>
    <div>
      <el-dialog
        title="提示1111"
        :visible.sync="dialogVisible"
      >
        這是一個彈框
      </el-dialog>
    </div>
  </div>
</template>

<style lang="less" scoped>
  @import "../less/login.less";
</style>

login.less文件

.login-page{
  h1{
    cursor: pointer;
    background: #f00;
  }
  .el-button{
    width: 200px;
  }
  .el-input{
    width: 100px;
  }
  //穿透性的改變第三方組件的樣式需要加上deep,如果是stylus使用  >>>  ,如果是less 或者sass就使用  /deep/
  /deep/.el-dialog{
        width:200px;
        height: 300px;
        background: #ddd;
  }
}

el-dialog成功產生效果為所自定義的樣式：

原文鏈接：https://blog.csdn.net/qq_37600506/article/details/103084863