Vue | Scoped

<style scoped> 中的scoped属性，主要影响着父子组件的样式。

我自己在做项目的时候，被这个属性坑了一把。我在自己的组件中引入了ElementUi的组件，当我想去修改ElementUI的组件默认样式时发现无效：

<template>
      <div style="margin: auto;width: 50%">
          <el-input></el-input> //  .el-input__inner被包裹在该组件中
          <input class="el-input__inner"></input>
      </div>
</template>
<style scoped>
  .el-input__inner{
    background-color: red!important;
  }
</style>

就是因为scoped，导致style只能作用于本组件中的元素，无法修改子组件内的该样式。 

总结：在组件中使用scoped会导致style中只能修改该组件中显式出现的样式，父组件也无法修改该组件的样式，但要注意的是，即使加了scoped，父组件如果设置important也是可以修改的。

---

Scoped穿透

如果我希望在一个组件中加上scoped属性，避免我在该组件中写的样式无意中覆盖掉别的组件的样式，但同时又想修改一些引入的第三方组件默认样式，那可以使用Scoped穿透。我使用的是scss

1. 引入npm install node-sass --save-dev 和 npm install sass-loader --save-dev ，若安装完毕后启动项目报错可能是sass-loader的版本过高，改为7.3.1即可

2. 使用/deep/ 完成穿透

<template>
      <div class="blank">
          <el-input></el-input> <!--.el-input__inner被包裹在该组件中!-->
          <input class="el-input__inner"></input>
      </div>
</template>
<style scoped>
   /deep/ .el-input__inner{
    background-color: red;
  }
<style>

 

另外也可以用 >>>完成穿透

<template>
      <div class="blank">
          <el-input></el-input> <!--.el-input__inner被包裹在该组件中!-->
          <input class="el-input__inner"></input>
      </div>
</template>
<style scoped>
   >>> .el-input__inner{
    background-color: red;
  }
<style>

---

其他方式

在使用scoped的情况下还有另外几种方式能修改子组件的样式：

1. 另外写一个不带scoped的style。
2. 写一个全局的css文件修改样式，在main中全局引用。